前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >layui 表格添加右键菜单

layui 表格添加右键菜单

作者头像
jwj
修改2023-01-06 09:29:40
3.2K0
修改2023-01-06 09:29:40
举报

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

监听行的contextmenu

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

代码语言: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;
        }
      }
    });
  }
});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-01-042,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 监听行的contextmenu
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档