layui 表格添加右键菜单
为了减少表格列的长度,想着把行操作都放到鼠标右键菜单去。可惜Layui的表格目前还不支持右键菜单事件,只能自己去实现了。
监听行的contextmenu
可以在表格数据渲染完毕的回调里,利用下拉菜单组件dropdown
监听行tr
的contextmenu
事件。
layui.table.render({
// 省略其它配置....
// 表格数据渲染完毕的回调
done (response, curr, count) {
// table实例
let that = this;
// 下拉菜单组件
layui.dropdown.render({
// 监听行`tr`的事件
elem: `.layui-table-view[lay-id="${that.id}"] .layui-table-body tr`
// 监听`contextmenu`事件
,trigger: 'contextmenu'
// 菜单列表
,data: [
{title: '操作1', id: 'event1'},
{title: '操作2', id: 'event2'}
],
click(data, othis) {
// 获取表格当前行数据
let trData = table.cache[that.id][this.elem.data('index')];
switch(data.id) {
case 'event1':
layer.alert('操作1');
break;
case 'event2':
layer.alert('操作2');
break;
}
}
});
}
});