layui表格 监听鼠标右键的心得

之前看过一篇文章 ,在这里 我把他贴出来
原文链接：https://blog.youkuaiyun.com/DengZY926/article/details/82011955

layui.use(['table', 'layer'], function () {
      var table = layui.table,
      layer = layui.layer;
      table.render({
           elem: '#filing_info_table',
           height: 'full-65',
           page: true, //开启分页
           cols: [cols],
           data: data,
           done: function (res, curr, count) {
           var data = res.data;
           $('.layui-table-body tr').each(function (e) {
                 //表单鼠标右键操作
                 $(this).mousedown(function (e) {
                 var index = $(this).attr('data-index');  //获取该表格行的数据
                 if (e.which == 3) {    //判断时鼠标右键按下
                        $("#menu").show();        //显示鼠标右键菜单列表
                        var x = e.originalEvent.x + 'px';  //获取鼠标位置x坐标
                        var y = e.originalEvent.y + 'px';  //获取鼠标位置y坐标
                        $("#menu").css({
                              top: y,    //定位右键菜单的位置
                              left: x
                         });
                         trdata = data[index];    //将该行的数据存放到自己定义的变量中
                  }
                  if (e.which == 1) {
                      $("#menu").hide();    //如果是点击的鼠标左键，则隐藏菜单
                  }
           });
    
       })
   }
});

虽然这个代码可以初步的让你实现监听鼠标右键,并且获取到当前行的数据, 但是在实际运用的过程中我发现他的代码有一些问题没有注意到,就是在我们点击layui 表格表头进行排序的时候, 鼠标右键就失效了,经过一番查阅 我看到layui 有一个监听表格排序的事件就是下面这个

//监听排序事件 
table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  console.log(obj.field); //当前排序的字段名
  console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  console.log(this); //当前排序的 th 对象
 
  //尽管我们的 table 自带排序功能，但并没有请求服务端。
  //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
  table.reload('idTest', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
    ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
      field: obj.field //排序字段
      ,order: obj.type //排序方式
    }
  });
  
  layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});

将这段代码加到你的layui初始函数里面, 鼠标右键就又可以生效了,

但是 这里会出现一个很严重的BUG,就是你鼠标右键获取的值并不是你当前行的值,所以解决方法就是
在获取表格数据的哪里加下面一段代码

$(this).addClass('layui-table-click').siblings().removeClass('layui-table-click');

就是选中当前行的意思

然后获取的时候按选中的行来获取数据就OK了