layui 表格添加右键菜单

为了减少表格列的长度，想着把行操作都放到鼠标右键菜单去。可惜Layui的表格目前还不支持右键菜单事件，只能自己去实现了。

监听行的contextmenu

可以在表格数据渲染完毕的回调里，利用下拉菜单组件dropdown监听行tr的contextmenu事件。

代码语言：javascript复制

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;
        }
      }
    });
  }
});

contextmenu dropdown layui 表格 事件

1 人点赞