在 layui 的表格组件中,区分表头事件和行内事件是通过事件类型(toolbar 和 tool)以及 lay-filter 值来实现的。
我们有一个表格,其中有一个工具栏按钮和操作按钮。我们将使用 layui 的 table 组件来处理这些事件。
HTML 结构:
bash
<table id="demo" 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>
</div>
</script>
<!-- 行内操作按钮模板 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
JavaScript 代码:
bash
layui.use(['table'], function() {
var table = layui.table;
// 渲染表格
table.render({
elem: '#demo',
toolbar: '#toolbarDemo',
url: '/your/data/url',
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{toolbar: '#barDemo', title: '操作'}
]]
});
// 监听表头工具栏按钮点击事件
table.on('toolbar(test)', function(obj) {
if (obj.event === 'add') { // 添加按钮点击事件
// 处理添加按钮的逻辑
}
});
// 监听行内操作按钮点击事件
table.on('tool(test)', function(obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'edit') { // 编辑按钮点击事件
// 处理编辑按钮的逻辑
} else if (layEvent === 'delete') { // 删除按钮点击事件
// 处理删除按钮的逻辑
}
});
});
通过在按钮的 HTML 模板中使用 lay-event 属性来指定按钮的事件名。然后,通过 table.on 来监听相应的事件,根据 event 参数的值来区分是表头工具栏事件还是行内操作按钮事件。
layui 能够根据事件类型和 lay-filter 值来知道你是要监听表头还是行内元素,并在事件发生时触发相应的回调函数。