html表格右键可编辑,Bootstrap table右键功能实现方法
最近遇到有一個(gè)需求，需要在Bootstrap table上使用右鍵。網(wǎng)上搜了半天沒(méi)有找到，最后發(fā)現(xiàn)Bootstrap table不支持右鍵(官方文檔給出的答案 https://github.com/wenzhixin/bootstrap-table/issues/241 )。
本文介紹使用contextMenu插件實(shí)現(xiàn)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...
});
效果圖：
關(guān)于contextMenu的使用，可以參考網(wǎng)頁(yè)中右鍵功能的實(shí)現(xiàn)— contextMenu的使用 。
關(guān)于Bootstrap table的使用，可以參考官方文檔Bootstrap table。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持。
總結(jié)
以上是生活随笔為你收集整理的html表格右键可编辑,Bootstrap table右键功能实现方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： win10的bios怎么恢复出厂设置
- 下一篇： 计算机与应用化学怎么投稿,计算机与应用化