微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用contextMenu插件实现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弹出右键菜单。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文地址:https://www.jb51.cc/bootstrap/41495.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐