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

最新推荐文章于 2022-12-30 11:18:55 发布

wode路

最新推荐文章于 2022-12-30 11:18:55 发布

阅读量1.3k

点赞数 1

分类专栏： layui 前端 js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44249754/article/details/106278106

版权

前端同时被 3 个专栏收录

56 篇文章 0 订阅

订阅专栏

37 篇文章 0 订阅

订阅专栏

layui

13 篇文章 0 订阅

订阅专栏

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

 <button class="layui-btn layui-btn-sm" title="添加一行" data-type="addRow"><img style="width: 15.2px; margin-top: -3px;" src="../../static/img/zj.png"/> 增加
</button>

加载第一个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 () { //只会调用一次 }
      }
})