Layui快速入门之第九节 表格事件的使用
目录
一：事件
二：头部工具栏事件
三：排序切换事件
四：列拖拽宽度后的事件
五：列筛选（显示或隐藏）后的事件
六：行单击和双击事件
七：行右键菜单事件
八：单元格编辑事件
九：单元格工具事件
十：复选框事件
十一：单选框事件
十二：尾部分页栏事件
一：事件
table.on('event(filter)', callback);
- 参数
event(filter)是事件的特定结构。event为事件名，支持的事件见下表。filter为元素属性lay-filter对应的值。 - 参数
callback为事件执行时的回调函数，并返回一个包含各项成员的object类型的参数。
| event | 描述 |
|---|---|
| toolbar | 头部工具栏事件 |
| sort | 排序切换事件 |
| colResized 2.8+ | 列拖拽宽度后的事件 |
| colToggled 2.8+ | 列筛选（显示或隐藏）后的事件 |
| row / rowDouble | 行单击和双击事件 |
| rowContextmenu 2.8+ | 行右键菜单事件 |
| edit | 单元格编辑事件 |
| tool 🔥 | 单元格工具事件。可在该事件中实现行的更新与删除操作。 |
| checkbox | 复选框事件 |
| radio | 单选框事件 |
| pagebar 2.7+ | 尾部分页栏事件 |
二：头部工具栏事件
table.on('toolbar(filter)', callback);
点击头部工具栏区域设定了属性为 lay-event="" 的元素时触发。如：
<!-- 原始容器 -->
<table id="test" lay-filter="test"></table><!-- 工具栏模板 -->
<script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="add">添加</button><button class="layui-btn layui-btn-sm" lay-event="delete">删除</button><button class="layui-btn layui-btn-sm" lay-event="update">编辑</button></div>
</script><script>
layui.use(function(){var table = layui.table;// 渲染table.render({elem: '#test',toolbar: '#toolbarDemo',// … // 其他属性});// 头部工具栏事件table.on('toolbar(test)', function(obj){var options = obj.config; // 获取当前表格属性配置项var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据console.log(obj); // 查看对象所有成员// 根据不同的事件名进行相应的操作switch(obj.event){ // 对应模板元素中的 lay-event 属性值case 'add':layer.msg('添加');break;case 'delete':layer.msg('删除');break;case 'update':layer.msg('编辑');break;};});
});
</script>三：排序切换事件
table.on('sort(filter)', callback);
点击表头排序时触发，它通常在设置 autoSort: false 基础属性时使用，以呈现后端的排序，而不是默认的前端排序。
var table = layui.table;// 禁用前端自动排序，以便由服务端直接返回排序好的数据
table.render({elem: '#test',autoSort: false, // 禁用前端自动排序。// … // 其他属性
});// 触发排序事件
table.on('sort(test)', function(obj){console.log(obj.field); // 当前排序的字段名console.log(obj.type); // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）console.log(this); // 当前排序的 th 对象// 尽管我们的 table 自带排序功能，但并没有请求服务端。// 有些时候，你可能需要根据当前排序的字段，重新向后端发送请求，从而实现服务端排序，如：table.reload('test', {initSort: obj, // 记录初始排序，如果不设的话，将无法标记表头的排序状态。where: { // 请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）field: obj.field, // 排序字段order: obj.type // 排序方式}});
});四：列拖拽宽度后的事件
table.on('colResized(filter)', callback);
在表头列分割线拖拽宽度后触发。
var table = layui.table;// 渲染
table.render({elem: '#test',// … // 其他属性
});// 列拖拽宽度后的事件
table.on('colResized(test)', function(obj){var col = obj.col; // 获取当前列属性配置项var options = obj.config; // 获取当前表格基础属性配置项console.log(obj); // 查看对象所有成员
});五：列筛选（显示或隐藏）后的事件
table.on('colToggled(filter)', callback);
点击头部工具栏右上角的字段筛选列表时触发。
var table = layui.table;// 渲染
table.render({elem: '#test',// … // 其他属性
});// 列筛选（显示或隐藏）后的事件
table.on('colToggled(test)', function(obj){var col = obj.col; // 获取当前列属性配置项var options = obj.config; // 获取当前表格基础属性配置项console.log(obj); // 查看对象所有成员
});六：行单击和双击事件
- 行单击事件：
table.on('row(filter)', callback); - 行双击事件：
table.on('rowDouble(filter)', callback);
单击或双击 table 行任意区域触发，两者用法相同。
var table = layui.table;// 渲染
table.render({elem: '#test',// … // 其他属性
});// 行单击事件
table.on('row(test)', function(obj){var data = obj.data; // 得到当前行数据var index = obj.index; // 得到当前行索引var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象var options = obj.config; // 获取当前表格基础属性配置项console.log(obj); // 查看对象所有成员// obj.del() // 删除当前行// obj.update(fields, related); // 修改行数据// obj.setRowChecked(opts); // 设置行选中状态
});七：行右键菜单事件
table.on('rowContextmenu(filter)', callback);
右键单击行时触发。
<table class="layui-hide" id="ID-table-onrowContextmenu"></table>
<script>
layui.use(['table', 'dropdown', 'util'], function(){var table = layui.table;var dropdown = layui.dropdown;var util = layui.util;// 渲染table.render({elem: '#ID-table-onrowContextmenu',defaultContextmenu: false, // 是否在 table 行中允许默认的右键菜单url: '/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口page: true,cols: [[{field:'id', title:'ID', width:80, fixed: 'left', unresize: true},{field:'username', title:'用户', width:120},{field:'sex', title:'性别', width:80},{field:'city', title:'城市', width:100},{field:'sign', title:'签名'},{field:'experience', title:'积分', width:80, sort: true}]],});// 行单击事件table.on('rowContextmenu(ID-table-onrowContextmenu)', function(obj){var data = obj.data; // 得到当前行数据var index = obj.index; // 得到当前行索引var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象var options = obj.config; // 获取当前表格基础属性配置项// console.log(obj); // 查看对象所有成员// 右键操作dropdown.render({trigger: 'contextmenu',show: true,data: [{title: 'Menu item 1', id: 'AAA'},{title: 'Menu item 2', id: 'BBB'}],click: function(menuData, othis) {// 显示选中的相关数据 - 仅用于演示layer.alert(util.escape(JSON.stringify({dropdown: menuData,table: obj.data})));}});// obj.del() // 删除当前行// obj.update(fields, related); // 修改行数据obj.setRowChecked({selectedStyle: true}); // 标注行选中状态样式});
});
</script>八：单元格编辑事件
table.on('edit(filter)', callback);
单元格被编辑，且值发生改变时触发。
var table = layui.table;
var layer = layui.layer;// 单元格编辑事件
table.on('edit(test)', function(obj){var field = obj.field; // 得到修改的字段var value = obj.value // 得到修改后的值var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增var data = obj.data // 得到所在行所有键值var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增console.log(obj); // 查看对象所有成员// 值的校验if(value.replace(/\s/g, '') === ''){layer.tips('值不能为空', this, {tips: 1});return obj.reedit(); // 重新编辑 -- v2.8.0 新增}// 编辑后续操作，如提交更新请求，以完成真实的数据更新// …// 更新当前缓存数据var update = {};update[field] = value;obj.update(update, true); // 参数 true 为 v2.7 新增功能，即同步更新其他包含自定义模板并可能存在关联的列视图
});九：单元格工具事件
- 单元格工具事件「单击触发」：
table.on('tool(filter)', callback); - 单元格工具事件「双击触发」：
table.on('toolDouble(filter)', callback);
单击或双击单元格中带有 lay-event="" 属性的元素时触发。在表格主体的单元格中，经常需要进行很多的动态操作，比如编辑、删除等操作，这些均可以在单元格工具事件中完成。
<!-- 表头某列 templet 属性指向的模板 -->
<script type="text/html" id="toolEventDemo"><a class="layui-btn layui-btn-xs" lay-event="detail">查看</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a><!-- 支持任意的 laytpl 组件语法，如： -->{{# if(d.auth > 2){ }}<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>{{# } }}
</script><table id="test" lay-filter="test"></table> <script>
layui.use(function(){var table = layui.table;// 渲染table.render({elem: '#test',cols: [[{title: '操作', width: 200, templet: '#toolEventDemo'}]]// … // 其他属性});// 单元格工具事件table.on('tool(test)', function(obj){var data = obj.data; // 得到当前行数据var index = obj.index; // 得到当前行索引var layEvent = obj.event; // 获得元素对应的 lay-event 属性值var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象var options = obj.config; // 获取当前表格基础属性配置项console.log(obj); // 查看对象所有成员// 根据 lay-event 的值执行不同操作if(layEvent === 'detail'){ //查看// do somehing} else if(layEvent === 'del'){ //删除layer.confirm('确定删除吗？', function(index){obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存layer.close(index);// 向后端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载/*table.reloadData(id, {scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增});*/});} else if(layEvent === 'edit'){ //编辑// do something// 同步更新缓存对应的值// 该方法仅为前端层面的临时更新，在实际业务中需提交后端请求完成真实的数据更新。obj.update({username: '123',title: 'abc'}); // 若需更新其他包含自定义模板并可能存在关联的列视图，可在第二个参数传入 trueobj.update({username: '123'}, true); // 注：参数二传入 true 功能为 v2.7.4 新增// 当发送后端请求成功后，可再通过 reloadData 方法完成数据重载/*table.reloadData(id, {scrollPos: 'fixed' // 保持滚动条位置不变 - v2.7.3 新增});*/}});
});
</script>十：复选框事件
able.on('checkbox(filter)', callback);
当 table 开启复选框，且点击复选框时触发。
var table = layui.table;// 复选框事件
table.on('checkbox(test)', function(obj){console.log(obj); // 查看对象所有成员console.log(obj.checked); // 当前是否选中状态console.log(obj.data); // 选中行的相关数据console.log(obj.type); // 若触发的是全选，则为：all；若触发的是单选，则为：one
});十一：单选框事件
table.on('radio(filter)', callback);
当 table 开启单选框，且点击单选框时触发。
var table = layui.table;// 单选框事件
table.on('radio(test)', function(obj){console.log(obj); // 当前行的一些常用操作集合console.log(obj.checked); // 当前是否选中状态console.log(obj.data); // 选中行的相关数据
});十二：尾部分页栏事件
table.on('pagebar(filter)', callback);
点击尾部分页栏自定义模板中属性为 lay-event="" 的元素时触发。用法跟 toolbar 完全一致
var table = layui.table;// 渲染
table.render({elem: '#demo',pagebar: '#pagebarDemo' // 分页栏模板所在的选择器// … // 其他参数
});// 分页栏事件
table.on('pagebar(test)', function(obj){console.log(obj); // 查看对象所有成员console.log(obj.config); // 当前实例的配置信息console.log(obj.event); // 属性 lay-event 对应的值
});