使用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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
直接生成打开窗口代码,不必下载
May 14 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
详解es6超好用的语法糖Decorator
Aug 01 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在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
Python学习资料
2007/02/08 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python编程中的文件操作攻略
2015/10/16 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
财务人员求职自荐书范文
2014/02/10 职场文书
美容院营销方案
2014/03/05 职场文书
如何写自我鉴定
2014/03/19 职场文书
环保倡议书
2014/04/14 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android