目錄

一：事件

二：頭部工具欄事件

三：排序切換事件

?四：列拖拽寬度后的事件

五：列篩選（顯示或隱藏）后的事件

六：行單擊和雙擊事件

七：行右鍵菜單事件

?八：單元格編輯事件

九：單元格工具事件

十：復(fù)選框事件

十一：單選框事件

十二：尾部分頁欄事件?

---

一：事件

table.on('event(filter)', callback);

• 參數(shù)?event(filter)?是事件的特定結(jié)構(gòu)。?event?為事件名，支持的事件見下表。filter?為元素屬性?lay-filter?對(duì)應(yīng)的值。
• 參數(shù)?callback?為事件執(zhí)行時(shí)的回調(diào)函數(shù)，并返回一個(gè)包含各項(xiàng)成員的?object?類型的參數(shù)。

event	描述
toolbar	頭部工具欄事件
sort	排序切換事件
colResized?2.8+	列拖拽寬度后的事件
colToggled?2.8+	列篩選（顯示或隱藏）后的事件
row / rowDouble	行單擊和雙擊事件
rowContextmenu?2.8+	行右鍵菜單事件
edit	單元格編輯事件
tool?🔥	單元格工具事件?？稍谠撌录袑?shí)現(xiàn)行的更新與刪除操作。
checkbox	復(fù)選框事件
radio	單選框事件
pagebar?2.7+	尾部分頁欄事件

二：頭部工具欄事件

table.on('toolbar(filter)', callback);

點(diǎn)擊頭部工具欄區(qū)域設(shè)定了屬性為?lay-event=""?的元素時(shí)觸發(fā)。如：

<!-- 原始容器 -->
<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; // 獲取當(dāng)前表格屬性配置項(xiàng)var checkStatus = table.checkStatus(options.id); // 獲取選中行相關(guān)數(shù)據(jù)console.log(obj); // 查看對(duì)象所有成員// 根據(jù)不同的事件名進(jìn)行相應(yīng)的操作switch(obj.event){ // 對(duì)應(yīng)模板元素中的 lay-event 屬性值case 'add':layer.msg('添加');break;case 'delete':layer.msg('刪除');break;case 'update':layer.msg('編輯');break;};});
});
</script>

三：排序切換事件

table.on('sort(filter)', callback);

? ? ? ? ? 點(diǎn)擊表頭排序時(shí)觸發(fā)，它通常在設(shè)置?autoSort: false?基礎(chǔ)屬性時(shí)使用，以呈現(xiàn)后端的排序，而不是默認(rèn)的前端排序。

var table = layui.table;// 禁用前端自動(dòng)排序，以便由服務(wù)端直接返回排序好的數(shù)據(jù)
table.render({elem: '#test',autoSort: false, // 禁用前端自動(dòng)排序。// … // 其他屬性
});// 觸發(fā)排序事件 
table.on('sort(test)', function(obj){console.log(obj.field); // 當(dāng)前排序的字段名console.log(obj.type); // 當(dāng)前排序類型：desc（降序）、asc（升序）、null（空對(duì)象，默認(rèn)排序）console.log(this); // 當(dāng)前排序的 th 對(duì)象// 盡管我們的 table 自帶排序功能，但并沒有請(qǐng)求服務(wù)端。// 有些時(shí)候，你可能需要根據(jù)當(dāng)前排序的字段，重新向后端發(fā)送請(qǐng)求，從而實(shí)現(xiàn)服務(wù)端排序，如：table.reload('test', {initSort: obj, // 記錄初始排序，如果不設(shè)的話，將無法標(biāo)記表頭的排序狀態(tài)。where: { // 請(qǐng)求參數(shù)（注意：這里面的參數(shù)可任意定義，并非下面固定的格式）field: obj.field, // 排序字段order: obj.type // 排序方式}});
});

?四：列拖拽寬度后的事件

table.on('colResized(filter)', callback);

在表頭列分割線拖拽寬度后觸發(fā)。

var table = layui.table;// 渲染
table.render({elem: '#test',// … // 其他屬性
});// 列拖拽寬度后的事件
table.on('colResized(test)', function(obj){var col = obj.col; // 獲取當(dāng)前列屬性配置項(xiàng)var options = obj.config; // 獲取當(dāng)前表格基礎(chǔ)屬性配置項(xiàng)console.log(obj); // 查看對(duì)象所有成員
});

五：列篩選（顯示或隱藏）后的事件

table.on('colToggled(filter)', callback);

點(diǎn)擊頭部工具欄右上角的字段篩選列表時(shí)觸發(fā)。

var table = layui.table;// 渲染
table.render({elem: '#test',// … // 其他屬性
});// 列篩選（顯示或隱藏）后的事件
table.on('colToggled(test)', function(obj){var col = obj.col; // 獲取當(dāng)前列屬性配置項(xiàng)var options = obj.config; // 獲取當(dāng)前表格基礎(chǔ)屬性配置項(xiàng)console.log(obj); // 查看對(duì)象所有成員
});

六：行單擊和雙擊事件

• 行單擊事件：table.on('row(filter)', callback);
• 行雙擊事件：table.on('rowDouble(filter)', callback);

單擊或雙擊 table 行任意區(qū)域觸發(fā)，兩者用法相同。

var table = layui.table;// 渲染
table.render({elem: '#test',// … // 其他屬性
});// 行單擊事件
table.on('row(test)', function(obj){var data = obj.data; // 得到當(dāng)前行數(shù)據(jù)var index = obj.index; // 得到當(dāng)前行索引var tr = obj.tr; // 得到當(dāng)前行 <tr> 元素的 jQuery 對(duì)象var options = obj.config; // 獲取當(dāng)前表格基礎(chǔ)屬性配置項(xiàng)console.log(obj); // 查看對(duì)象所有成員// obj.del() // 刪除當(dāng)前行// obj.update(fields, related);  // 修改行數(shù)據(jù)// obj.setRowChecked(opts); // 設(shè)置行選中狀態(tài)
});

七：行右鍵菜單事件

table.on('rowContextmenu(filter)', callback);

右鍵單擊行時(shí)觸發(fā)。

<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 行中允許默認(rèn)的右鍵菜單url: '/static/json/table/user.json', // 此處為靜態(tài)模擬數(shù)據(jù)，實(shí)際使用時(shí)需換成真實(shí)接口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; // 得到當(dāng)前行數(shù)據(jù)var index = obj.index; // 得到當(dāng)前行索引var tr = obj.tr; // 得到當(dāng)前行 <tr> 元素的 jQuery 對(duì)象var options = obj.config; // 獲取當(dāng)前表格基礎(chǔ)屬性配置項(xiàng)// console.log(obj); // 查看對(duì)象所有成員// 右鍵操作dropdown.render({trigger: 'contextmenu',show: true,data: [{title: 'Menu item 1', id: 'AAA'},{title: 'Menu item 2', id: 'BBB'}],click: function(menuData, othis) {// 顯示選中的相關(guān)數(shù)據(jù) - 僅用于演示layer.alert(util.escape(JSON.stringify({dropdown: menuData,table: obj.data})));}});// obj.del() // 刪除當(dāng)前行// obj.update(fields, related);  // 修改行數(shù)據(jù)obj.setRowChecked({selectedStyle: true}); // 標(biāo)注行選中狀態(tài)樣式});
});
</script>

?八：單元格編輯事件

table.on('edit(filter)', callback);

單元格被編輯，且值發(fā)生改變時(shí)觸發(fā)。

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(); // 得到當(dāng)前列的表頭配置屬性 -- v2.8.0 新增console.log(obj); // 查看對(duì)象所有成員// 值的校驗(yàn)if(value.replace(/\s/g, '') === ''){layer.tips('值不能為空', this, {tips: 1});return obj.reedit(); // 重新編輯 -- v2.8.0 新增}// 編輯后續(xù)操作，如提交更新請(qǐng)求，以完成真實(shí)的數(shù)據(jù)更新// …// 更新當(dāng)前緩存數(shù)據(jù)var update = {};update[field] = value;obj.update(update, true); // 參數(shù) true 為 v2.7 新增功能，即同步更新其他包含自定義模板并可能存在關(guān)聯(lián)的列視圖
});

九：單元格工具事件

• 單元格工具事件「單擊觸發(fā)」：?table.on('tool(filter)', callback);
• 單元格工具事件「雙擊觸發(fā)」：?table.on('toolDouble(filter)', callback);

單擊或雙擊單元格中帶有?lay-event=""?屬性的元素時(shí)觸發(fā)。在表格主體的單元格中，經(jīng)常需要進(jìn)行很多的動(dòng)態(tài)操作，比如編輯、刪除等操作，這些均可以在單元格工具事件中完成。

<!-- 表頭某列 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; // 得到當(dāng)前行數(shù)據(jù)var index = obj.index; // 得到當(dāng)前行索引var layEvent = obj.event; // 獲得元素對(duì)應(yīng)的 lay-event 屬性值var tr = obj.tr; // 得到當(dāng)前行 <tr> 元素的 jQuery 對(duì)象var options = obj.config; // 獲取當(dāng)前表格基礎(chǔ)屬性配置項(xiàng)console.log(obj); // 查看對(duì)象所有成員// 根據(jù) lay-event 的值執(zhí)行不同操作if(layEvent === 'detail'){ //查看// do somehing} else if(layEvent === 'del'){ //刪除layer.confirm('確定刪除嗎？', function(index){obj.del(); // 刪除對(duì)應(yīng)行（tr）的 DOM 結(jié)構(gòu)，并更新緩存layer.close(index);// 向后端發(fā)送刪除請(qǐng)求，執(zhí)行完畢后，可通過 reloadData 方法完成數(shù)據(jù)重載/*table.reloadData(id, {scrollPos: 'fixed'  // 保持滾動(dòng)條位置不變 - v2.7.3 新增});*/});} else if(layEvent === 'edit'){ //編輯// do something// 同步更新緩存對(duì)應(yīng)的值// 該方法僅為前端層面的臨時(shí)更新，在實(shí)際業(yè)務(wù)中需提交后端請(qǐng)求完成真實(shí)的數(shù)據(jù)更新。obj.update({username: '123',title: 'abc'}); // 若需更新其他包含自定義模板并可能存在關(guān)聯(lián)的列視圖，可在第二個(gè)參數(shù)傳入 trueobj.update({username: '123'}, true); // 注：參數(shù)二傳入 true 功能為 v2.7.4 新增// 當(dāng)發(fā)送后端請(qǐng)求成功后，可再通過 reloadData 方法完成數(shù)據(jù)重載/*table.reloadData(id, {scrollPos: 'fixed'  // 保持滾動(dòng)條位置不變 - v2.7.3 新增});*/}});
});
</script>

十：復(fù)選框事件

able.on('checkbox(filter)', callback);

當(dāng) table 開啟復(fù)選框，且點(diǎn)擊復(fù)選框時(shí)觸發(fā)。

var table = layui.table;// 復(fù)選框事件
table.on('checkbox(test)', function(obj){console.log(obj); // 查看對(duì)象所有成員console.log(obj.checked); // 當(dāng)前是否選中狀態(tài)console.log(obj.data); // 選中行的相關(guān)數(shù)據(jù)console.log(obj.type); // 若觸發(fā)的是全選，則為：all；若觸發(fā)的是單選，則為：one
});

十一：單選框事件

table.on('radio(filter)', callback);

當(dāng) table 開啟單選框，且點(diǎn)擊單選框時(shí)觸發(fā)。

var table = layui.table;// 單選框事件
table.on('radio(test)', function(obj){console.log(obj); // 當(dāng)前行的一些常用操作集合console.log(obj.checked); // 當(dāng)前是否選中狀態(tài)console.log(obj.data); // 選中行的相關(guān)數(shù)據(jù)
});

十二：尾部分頁欄事件?

table.on('pagebar(filter)', callback);

點(diǎn)擊尾部分頁欄自定義模板中屬性為?lay-event=""?的元素時(shí)觸發(fā)。用法跟 toolbar 完全一致

var table = layui.table;// 渲染
table.render({elem: '#demo',pagebar: '#pagebarDemo' // 分頁欄模板所在的選擇器// … // 其他參數(shù)
});// 分頁欄事件
table.on('pagebar(test)', function(obj){console.log(obj); // 查看對(duì)象所有成員console.log(obj.config); // 當(dāng)前實(shí)例的配置信息console.log(obj.event); // 屬性 lay-event 對(duì)應(yīng)的值
});