BootStrap-table-contextmenu使用过程的一些总结
缪成天
1 引入bootstrap-table-contextmenu
<script src="bootstrap-table-contextmenu.js"></script>2 按照官方例子，使用如下注意其中如果<table>标签如果有data-toggle="table"属性，则右键菜单不会生效。<body> <div class="container"> <div class="row"> <table id='grid'> <thead> <tr> <th data-field='itemid'>Item ID</th> <th data-field='name'>Name</th> <th data-field='price'>Price</th> </tr> </thead> <tbody> <tr><td>1</td><td>ABC</td><td>$1.00</td></tr> <tr><td>2</td><td>DEF</td><td>$2.00</td></tr> <tr><td>3</td><td>GHI</td><td>$3.00</td></tr> <tr><td>4</td><td>XYZ</td><td>$4.00</td></tr> </tbody> </table> </div> </div> <!-- context menu --> <ul id="context-menu" class="dropdown-menu"> <li data-item="edit"><a>Edit</a></li> <li data-item="delete"><a>Delete</a></li> <li data-item="action1"><a>Action Here</a></li> <li data-item="action2"><a>And Action Here</a></li> </ul> <script> $(function() { $('#grid').bootstrapTable({ contextMenu: '#context-menu', onContextMenuItem: function(row, $el){ if($el.data("item") == "edit"){ alert(row.itemid); } } }); }); </script> </body>
3 动态加载table内容，如果是<table>有data-toggle="table"属性,则使用如下脚本$(function() {
var tableData = [];
for (var i = 0; i <4; i++) {
var mes = {};
mes['itemid'] = i;
mes['name'] ='zhsh';
mes['price'] = '1$';
tableData.push(mes);
}
console.log(tableData);
$('#grid').bootstrapTable('refreshOptions', {
data: tableData
});
});
可以动态添加表格内容，如果去掉data-toggle="table"属性,则动态内容又添加不上。如何解决又要动态添加表格内容，又需要右键菜单呢，方案如下
去掉data-toggle="table"属性，先执行添加右键的脚本，再执行动态添加内容的脚本
$(function() {
var tableData = [];
for (var i = 0; i <4; i++) {
var mes = {};
mes['itemid'] = i;
mes['name'] ='zhsh';
mes['price'] = '1$';
tableData.push(mes);
}
console.log(tableData);
$('#grid').bootstrapTable({
contextMenu: '#context-menu',
onContextMenuItem: function(row, $el){
if($el.data("item") == "edit"){
alert(row.itemid);
}
}
});
$('#grid').bootstrapTable('refreshOptions', {
data: tableData
});
});
尝试过使用bootstrap-contextmenu来实现，因为我需要实现表格行的复制粘贴功能，当使bootstrap-contextmenu时点击复制后，菜单消失，点击粘贴后，表格追加一行，然而菜单并未
消失，使用bootstrap-table-contextmenu无此情况
类似资料：