使用contextMenu插件实现Bootstrap table弹出右键菜单


Posted in Javascript onFebruary 20, 2017

如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中,其中“开发高效,设备兼容”的特点表现得非常明显。再加上它默认的美观的UI组件,简直就是很多前端的大爱啊!!! 今天在这里跟大家分享Bootstrap table弹出右键菜单的实现方法。

最近遇到有一个需求,需要在Bootstrap table上使用右键。网上搜了半天没有找到,最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/wenzhixin/bootstrap-table/issues/241 )。

本文介绍使用contextMenu插件实现Bootstrap table右键功能。

代码(test.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="libs/bootstrap-table-v1.11.0/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="libs/bootstrap-table-v1.11.0/bootstrap-table.css" rel="external nofollow" >
<link href="libs/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="external nofollow" rel="stylesheet"/>
<script src="libs/jQuery/jquery-1.8.3.min.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap.min.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap-table.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap-table-zh-CN.js"></script>
<script src="libs/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
</head>
<body>
<table id="item_table"></table>
<script>
$('#item_table').bootstrapTable({
 columns: [{
 field: 'id',
 title: 'Item ID'
 }, {
 field: 'name',
 title: 'Item Name'
 }, {
 field: 'price',
 title: 'Item Price'
 }],
 data: [{
 id: 1,
 name: 'Item 1',
 price: '$1'
 }, {
 id: 2,
 name: 'Item 2',
 price: '$2'
 }]
});
$.contextMenu({
 // define which elements trigger this menu
 selector: "#item_table td",
 // define the elements of the menu
 items: {
 foo: {name: "Foo", callback: function(key, opt){ alert("Foo!"); }},
 bar: {name: "Bar", callback: function(key, opt){ alert("Bar!") }}
 }
 // there's more, have a look at the demos and docs...
});
</script>
</body>
</html>

效果图:

使用contextMenu插件实现Bootstrap table弹出右键菜单

关于contextMenu的使用,可以参考网页中右键功能的实现— contextMenu的使用 。

关于Bootstrap table的使用,可以参考官方文档Bootstrap table。

以上所述是小编给大家介绍的使用contextMenu插件实现Bootstrap table弹出右键菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 #Javascript
Bootstrap table右键功能实现方法
Feb 20 #Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 #Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 #Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 #Javascript
原生js实现轮播图的示例代码
Feb 20 #Javascript
深入理解Javascript中的观察者模式
Feb 20 #Javascript
You might like
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
javascript基础知识
2016/06/07 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
Python科学计算之Pandas详解
2017/01/15 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
一名女生的自荐信
2013/12/08 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
思品教学工作总结
2015/08/10 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python