最近遇到有一個需求，需要在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。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

總結

以上是生活随笔為你收集整理的html表格右键可编辑,Bootstrap table右键功能实现方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。