如今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...
});