使用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 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
js+html获取系统当前时间
Nov 10 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
webpack的移动端适配方案小结
Jul 25 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
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue观察模式浅析
2018/09/25 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
Node 代理访问的实现
2019/09/19 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
Python制作动态字符图的实例
2019/01/27 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
python 实现音频叠加的示例
2020/10/29 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
介绍一下Linux中的链接
2016/06/05 面试题
建筑工程毕业生自我鉴定
2014/01/14 职场文书
社会实践评语
2014/04/28 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
白酒营销策划方案
2014/08/17 职场文书
护士年终个人总结
2015/02/13 职场文书
2015年度党员个人总结
2015/02/14 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
2015年女职工工作总结
2015/05/15 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技