layui 多次加载数据表格，导致对表格的操作按钮的一次点击触发多次点击事件

╰半橙微兮° 2023-02-11 07:25 20阅读 0赞

将注册按钮事件写到加载的第一个layui模块中，可防止多次加载表格后触发多次data-type点击事件，代码如下：

加载第一个layui模块

//定义事件集
     var active = { };
     layui.use(['table', 'tree', 'form'], function() { 
       	var form = layui.form;
       	var tree = layui.tree;
        var table = layui.table;
    	 //注册按钮事件
    	 $('.layui-btn[data-type]').on('click', function () { 
    	     debugger
    	     var type = $(this).data('type');
    	     activeByType(type);
    	 });
    	
    	 //激活事件
    	 var activeByType = function (type, arg) { 
    	     debugger
    	     if (arguments.length === 2) { 
    	         active[type] ? active[type].call(this, arg) : '';
    	     } else { 
    	         active[type] ? active[type].call(this) : '';
    	     }
    	 }
    })

//填充表格,加载第二个layui模块

layui.use(['jquery', 'table', 'layer', 'form'], function () { 
        var $ = layui.$,
       		table = layui.table,
       		form = layui.form,
       		layer = layui.layer;
        form.render('select');
         //数据表格实例化
         var tbWidth = $("#tableRes").width();
    
         var layTableId = "layTable";
    
         //表格
         var exmtab = table.render({ 
             elem: '#table-list',
             data: window.viewObj.tbData,
             id: layTableId,
             method: 'POST',
             cols: [
                 [ { 
                     title: '序号',
                     type:'numbers'
                 },{ 
                     type: 'checkbox'
                 },{ 
                     field: 'inventoryName',
                     title: '存货名称',
                     align: 'center'
                 }
                 ]
             ],
             page: true,
             limits: [30, 50, 100, 500, 1000], //每页条数的选择项
             limit: 30, //每页默认显示的数量
             size: 'sm', //小尺寸的表格
             even: true, //开启隔行背景
             height: 'full-165', //高度最大化减去差值
             cellMinWidth: 120,
             //done - 数据渲染完的回调
             done: function (res, curr, count) { 
                 //由于layui 设置了超出隐藏，所以这里改变下，以兼容操作按钮的下拉菜单
                 $(".layui-table-box, .layui-table-cell").css('overflow', 'visible');
             }
         });
         form.render();
         
       	 active = { 
             //新增行
             addRow: function () {  //只会调用一次 }
          }
    })