layui table.on 鼠标右键点击tr弹出自定义菜单事件

可以使用layui的table模块来实现这个功能，具体代码如下：

layui.use(['table', 'layer'], function(){
  var table = layui.table;
  var layer = layui.layer;

  // 监听表格右键菜单事件
  table.on('rowRight', function(obj){
    // 获取鼠标点击位置的坐标
    var x = obj.event.pageX;
    var y = obj.event.pageY;
    // 显示自定义菜单
    layer.open({
      type: 1,
      title: false,
      closeBtn: 0,
      offset: [y + 'px', x + 'px'],
      content: $('#menu')
    });
  });
});

其中，`#menu`是自定义菜单的容器，可以在里面添加菜单项。在上面的代码中，当鼠标右键点击表格中的某一行时，会显示自定义菜单，并且会将自定义菜单的位置设置为鼠标点击的位置；当点击自定义菜单以外的区域时，自定义菜单会自动隐藏。需要注意的是，如果要使用`rowRight`事件，需要在table的初始化中设置`id`属性。

相关问题

table.on 鼠标右键点击tr弹出自定义菜单事件

可以使用jQuery实现这个功能，具体代码如下：

$(function(){
  // 给table中的tr绑定右键菜单事件
  $('table tr').bind('contextmenu',function(e){
    // 获取鼠标点击位置的坐标
    var x = e.pageX;
    var y = e.pageY;
    // 显示自定义菜单
    $('#menu').css({
      left: x + 'px',
      top: y + 'px'
    }).show();
    // 阻止默认右键菜单
    return false;
  });
  
  // 点击页面隐藏菜单
  $(document).click(function(){
    $('#menu').hide();
  });
});

其中，`#menu`是自定义菜单的容器，可以在里面添加菜单项。在上面的代码中，当鼠标右键点击`table`中的`tr`时，会显示自定义菜单，并阻止默认的右键菜单弹出；当点击页面其他位置时，自定义菜单会隐藏。

layui table数据，鼠标右键单击，右边弹出一个div，div中有两个菜单选项，修改和作废，点击修改和作废，触发对应事件，怎么实现

要实现这个功能，需要结合 layui 的 table 组件以及右键菜单插件。以下是实现的步骤：

1. 引入 layui 和右键菜单插件的 js 和 css 文件，具体可以在 layui 官网上找到。

2. 在 table 的配置项中加入 `contextmenu: true`，开启右键菜单功能。

3. 给 table 绑定 `contextmenu` 事件，在事件处理函数中阻止默认的右键菜单事件，然后根据点击的行和列获取对应的数据，将菜单 div 显示在指定位置。

4. 给菜单选项绑定点击事件，分别触发修改和作废的处理函数，处理函数中可以通过获取选中行的数据来进行相应的操作。

下面是一个示例代码，仅供参考：

layui.use(['table', 'layer', 'jquery', 'contextMenu'], function(){
  var table = layui.table;
  var layer = layui.layer;
  var $ = layui.jquery;
  var contextMenu = layui.contextMenu;
  
  // 定义表格数据
  var data = [
    {id: 1, name: '张三', age: 20, sex: '男'},
    {id: 2, name: '李四', age: 22, sex: '女'},
    {id: 3, name: '王五', age: 25, sex: '男'}
  ];
  
  // 渲染表格
  table.render({
    elem: '#demo',
    data: data,
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'age', title: '年龄'},
      {field: 'sex', title: '性别'}
    ]],
    contextmenu: true  // 开启右键菜单
  });
  
  // 绑定右键菜单事件
  $('#demo .layui-table-body').on('contextmenu', 'tr', function(e){
    e.preventDefault();  // 阻止默认的右键菜单事件
    var data = table.cache.demo[this.dataset.index];  // 获取当前行的数据
    var menuHtml = '<ul class="layui-context-menu">' +
                   '<li data-type="edit">修改</li>' +
                   '<li data-type="delete">作废</li>' +
                   '</ul>';
    var $menu = $(menuHtml).appendTo('body');  // 将菜单 div 显示在指定位置
    $menu.css({top: e.clientY, left: e.clientX});
    
    // 绑定菜单选项点击事件
    $menu.find('li').on('click', function(){
      var type = $(this).data('type');
      switch(type){
        case 'edit':
          edit(data);
          break;
        case 'delete':
          del(data);
          break;
      }
      $menu.remove();  // 移除菜单 div
    });
    
    // 点击页面其他位置，隐藏菜单 div
    $(document).one('click', function(){
      $menu.remove();
    });
  });
  
  // 修改处理函数
  function edit(data){
    layer.open({
      type: 1,
      title: '修改',
      content: '这里是修改表单',
      area: ['500px', '300px'],
      btn: ['保存', '取消'],
      yes: function(index, layero){
        // 获取表单数据，发送请求进行修改操作
        layer.close(index);
      }
    });
  }
  
  // 作废处理函数
  function del(data){
    layer.confirm('确定要作废吗？', function(index){
      // 发送请求进行作废操作
      layer.close(index);
    });
  }
});

需要注意的是，这里使用的是 layui 的右键菜单插件，不同的插件可能有不同的使用方法，具体请参考对应插件的文档。