目錄

一：事件

二：頭部工具欄事件

三：排序切換事件

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

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

六：行單擊和雙擊事件

七：行右鍵菜單事件

?八：單元格編輯事件

九：單元格工具事件

十：復選框事件

十一：單選框事件

十二：尾部分頁欄事件?

---

一：事件

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

• 參數?event(filter)?是事件的特定結構。?event?為事件名，支持的事件見下表。filter?為元素屬性?lay-filter?對應的值。
• 參數?callback?為事件執(zhí)行時的回調函數，并返回一個包含各項成員的?object?類型的參數。

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

二：頭部工具欄事件

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

點擊頭部工具欄區(qū)域設定了屬性為?lay-event=""?的元素時觸發(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; // 獲取當前表格屬性配置項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);

? ? ? ? ? 點擊表頭排序時觸發(fā)，它通常在設置?autoSort: false?基礎屬性時使用，以呈現后端的排序，而不是默認的前端排序。

var table = layui.table;// 禁用前端自動排序，以便由服務端直接返回排序好的數據
table.render({elem: '#test',autoSort: false, // 禁用前端自動排序。// … // 其他屬性
});// 觸發(fā)排序事件 
table.on('sort(test)', function(obj){console.log(obj.field); // 當前排序的字段名console.log(obj.type); // 當前排序類型：desc（降序）、asc（升序）、null（空對象，默認排序）console.log(this); // 當前排序的 th 對象// 盡管我們的 table 自帶排序功能，但并沒有請求服務端。// 有些時候，你可能需要根據當前排序的字段，重新向后端發(fā)送請求，從而實現服務端排序，如：table.reload('test', {initSort: obj, // 記錄初始排序，如果不設的話，將無法標記表頭的排序狀態(tài)。where: { // 請求參數（注意：這里面的參數可任意定義，并非下面固定的格式）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; // 獲取當前列屬性配置項var options = obj.config; // 獲取當前表格基礎屬性配置項console.log(obj); // 查看對象所有成員
});

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

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

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

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 行任意區(qū)域觸發(fā)，兩者用法相同。

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); // 設置行選中狀態(tài)
});

七：行右鍵菜單事件

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

右鍵單擊行時觸發(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 行中允許默認的右鍵菜單url: '/static/json/table/user.json', // 此處為靜態(tài)模擬數據，實際使用時需換成真實接口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}); // 標注行選中狀態(tài)樣式});
});
</script>

?八：單元格編輯事件

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

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

九：單元格工具事件

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

單擊或雙擊單元格中帶有?lay-event=""?屬性的元素時觸發(fā)。在表格主體的單元格中，經常需要進行很多的動態(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; // 得到當前行數據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 的值執(zhí)行不同操作if(layEvent === 'detail'){ //查看// do somehing} else if(layEvent === 'del'){ //刪除layer.confirm('確定刪除嗎？', function(index){obj.del(); // 刪除對應行（tr）的 DOM 結構，并更新緩存layer.close(index);// 向后端發(fā)送刪除請求，執(zhí)行完畢后，可通過 reloadData 方法完成數據重載/*table.reloadData(id, {scrollPos: 'fixed'  // 保持滾動條位置不變 - v2.7.3 新增});*/});} else if(layEvent === 'edit'){ //編輯// do something// 同步更新緩存對應的值// 該方法僅為前端層面的臨時更新，在實際業(yè)務中需提交后端請求完成真實的數據更新。obj.update({username: '123',title: 'abc'}); // 若需更新其他包含自定義模板并可能存在關聯的列視圖，可在第二個參數傳入 trueobj.update({username: '123'}, true); // 注：參數二傳入 true 功能為 v2.7.4 新增// 當發(fā)送后端請求成功后，可再通過 reloadData 方法完成數據重載/*table.reloadData(id, {scrollPos: 'fixed'  // 保持滾動條位置不變 - v2.7.3 新增});*/}});
});
</script>

十：復選框事件

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

當 table 開啟復選框，且點擊復選框時觸發(fā)。

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

十一：單選框事件

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

當 table 開啟單選框，且點擊單選框時觸發(fā)。

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

十二：尾部分頁欄事件?

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

點擊尾部分頁欄自定義模板中屬性為?lay-event=""?的元素時觸發(fā)。用法跟 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 對應的值
});