在使用bootstrap框架时，有时想做鼠标右键快捷弹层操作，可以使用BootstrapMenu.js插件。可以实现自定义操作点击事件。首先引入**BootstrapMenu.min.js**
下载地址：
链接: https://pan.baidu.com/s/1axh2zFJOUoZ4XJU-yjrchw?pwd=f2cw 提取码: f2cw
效果图：
// 操作代码var menu = new BootstrapMenu('.table tbody tr', {//获取表格当前点击的行
fetchElementData: function (row) { //fetchElementData获取原数据并返回
var dataRow = $table.bootstrapTable('getData')[row[0].dataset.index]
return dataRow;
},
//自定义右键菜单的功能
actions: {
detailDescription: {
name: '<font size=2>查看</font>',
iconClass: 'uil-search-alt',// 图标
onClick: function (row) {
// 执行右击事件
}
},
editDescription: {
name: '<font size=2>更新</font>',
iconClass: 'uil-edit',
onClick: function (row) {
//执行右击事件
}
}
}
});
action也可以传入数据对象：
var menu = new BootstrapMenu('.tabs-content', {
fetchElementData: function ($rowElem) {
return $rowElem;
},
actions: [{
name: '关闭当前页面',
onClick: function (ele) {
}
}, {
name: '关闭所有页面',
onClick: function (ele) {
}
}, {
name: '关闭其他页面',
onClick: function (ele) {
}
}]
});
菜单样式
/*表格菜单颜色/左边距*/.dropdown-menu {
padding-left: 5px;
color: #bec1c5;}/*表格菜单<li>标签间距*/.dropdown-menu li {
padding-bottom: 5px;}/*表格菜单宽度*/.bootstrapMenu ul {
min-width: 6rem;}/*表格菜单字体颜色*/.bootstrapMenu ul li a {
color: #838f9c;}
