鼠标右键对Layui每行表格数据进行操作

通过上次介绍的自定义鼠标右键拓展功能,对Layui数据表格中的每行数据进行操作

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();    //如果是点击的鼠标左键,则隐藏菜单
                  }
           });
    
       })
   }
});

猜你喜欢

转载自blog.csdn.net/DengZY926/article/details/82011955
今日推荐