html表格右键可编辑,Bootstrap table右键功能实现方法

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

本文介绍使用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", callback: function(key, opt){ alert("Bar!") }}

}

// there's more, have a look at the demos and docs...

});

效果图：

关于contextMenu的使用，可以参考网页中右键功能的实现— contextMenu的使用 。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。