在 layui 的表格組件中，區(qū)分表頭事件和行內(nèi)事件是通過事件類型（toolbar 和 tool）以及 lay-filter 值來實(shí)現(xiàn)的。
我們有一個(gè)表格，其中有一個(gè)工具欄按鈕和操作按鈕。我們將使用 layui 的 table 組件來處理這些事件。
HTML 結(jié)構(gòu)：
<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>
<!-- 行內(nèi)操作按鈕模板 -->
<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 代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-674592.html
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: '操作'}
]]
});
// 監(jiān)聽表頭工具欄按鈕點(diǎn)擊事件
table.on('toolbar(test)', function(obj) {
if (obj.event === 'add') { // 添加按鈕點(diǎn)擊事件
// 處理添加按鈕的邏輯
}
});
// 監(jiān)聽行內(nèi)操作按鈕點(diǎn)擊事件
table.on('tool(test)', function(obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'edit') { // 編輯按鈕點(diǎn)擊事件
// 處理編輯按鈕的邏輯
} else if (layEvent === 'delete') { // 刪除按鈕點(diǎn)擊事件
// 處理刪除按鈕的邏輯
}
});
});
通過在按鈕的 HTML 模板中使用 lay-event 屬性來指定按鈕的事件名。然后，通過 table.on 來監(jiān)聽相應(yīng)的事件，根據(jù) event 參數(shù)的值來區(qū)分是表頭工具欄事件還是行內(nèi)操作按鈕事件。
layui 能夠根據(jù)事件類型和 lay-filter 值來知道你是要監(jiān)聽表頭還是行內(nèi)元素，并在事件發(fā)生時(shí)觸發(fā)相應(yīng)的回調(diào)函數(shù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-674592.html
到了這里，關(guān)于layui表格事件分析實(shí)例的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
