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

发布时间：2020-12-18 00:40:52 所属栏目：安全来源：网络整理

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

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

最近遇到有一个需求，需要在Bootstrap table上使用右键。网上搜了半天没有找到，最后发现Bootstrap table不支持右键(官方文档给出的答案 )。

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

代码(test.html)：

$('#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",opt){ alert("Bar!") }} } // there's more,have a look at the demos and docs... });

效果图：

这里写图片描述

关于contextMenu的使用，可以参考网页中。

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

以上所述是小编给大家介绍的使用contextMenu插件实现Bootstrap table弹出右键菜单。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!