Layui的事件监听

开发工具与关键技术：vs mvc
作者
撰写时间：2019年6月 6日

在这里主要是说的是layui的事件监听部分，那么目前用的是2.x以上的版本，在这些版本中对数据表格进行了很大的优化，以越来越好用了，在layui中事件监听的语法是table.on(‘event(fiter)’,callback),event为内置事件名，filter是容器设定的值，这个模块在layui有专属的事件，在一般情况下，这里的事件监听是默认table模块容器的。在这里面也有说到如果要监听某个容器，使用事件过滤器就行。
目前事件监听主要监听的是表头工具栏事件，复选框选择，单元格编辑，行的单双击事件，行工具事件，监听排序切换。
监听表头工具栏事件首先要先有个容器装着，然后在工具栏上给几个按钮，就通过调用table，就可监听了。

table容器 //监听事件 table.on('toolbar(test)', function(obj){ var checkStatus = table.checkStatus(obj.config.id); switch(obj.event){ case 'add': layer.msg('添加'); break; };} );

这样就完成了工具栏的监听，那么在layui里也有着姣好理解的语法语句，后面的就不具体细说完了，监听单元格编辑，单元格被编辑，且值发生改变时触发，回调函数返回对象参数，会监听到所在行的所有相关数据。
还有个说到的是监听行排序切换。他是在点击表头排序时触发他通过在基础参数中设置autoSort：false时使用，以完成服务端的排序，而不是默认的前端排序。该事件的回调函数返回一个object参数，（在版本2.4.4中新增）
//监听排序事件
table.on(‘sort(test)’, function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter=“对应的值”
console.log(obj.field); //当前排序的字段名
console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
console.log(this); //当前排序的 th 对象
}
});

layer.msg('服务端排序。order by '+ obj.field + ’ ’ + obj.type);
});

在这是主要说说监听行的单双击事件，首先是像上面一样，有个容器，并里面有一些数据，这样才能开始监听行的单双击事件，就是先按照语法table.on(‘’),如果监听的是单击就给row,是双击的就给rowDouble,那么给个示例：
layuiTable.on(‘row(tabEmployee)’, function (obj) {
var data = obj.data;
obj.tr.addClass(‘layui-table-click’).siblings().removeClass(‘layui-table-click’);
//单击选中复选框
obj.tr.find(‘div.layui-unselect.layui-form-checkbox’)[1].click();

            });

首先是获取到表格的id，给的是监听单击事件，在给个回调函数，声明变量来获取数据，下一行代码的是获取到点击的行，再就是找到div里的类名称，form里的复选框点击。大概就是这样就完成了layui的数据表格监听行的单击事件。如果要的效果是双击，就把row换成rowDouble就行了。