1：監聽頭部工具欄事件

點選頭部工具欄區域設定了屬性為lay-event=""的元素時觸發（該事件為 layui 2.4.0 開始新增）。如：

<%--頭部toolbar--%>
<div style="display:none" id="userToolBar">
    <div class="layui-btn-group">
        <%--點選頭部工具欄區域設定了屬性為 lay-event="" 的元素時觸發--%>
        <button type="button" class="layui-btn"  lay-event
 
="add">增加</button>
        <button type="button" class="layui-btn"  lay-event="delAll">批量刪除</button>
    </div>
</div>

//監聽頭部工具欄的事件
        //監聽事件，這裡的userTable是表格中指定的lay-filter="userTable"
        table.on('toolbar(userTable)', function(obj){
            //var checkStatus = table.checkStatus(obj.config.id);
 

            switch(obj.event){
                case 'add':
                    layer.msg('新增');
                    break;
                case 'delAll':
                    layer.msg('刪除');
                    break;
            };
        });

2：監聽複選框選擇

1. table.on('checkbox(test)', function(obj){
2. console.log(obj.checked); //當前是否選中狀態
3. console.log(obj.data); //選中行的相關資料
4. console.log(obj.type); //如果觸發的是全選，則為：all，如果觸發的是單選，則為：one
5. });

3：監聽單元格編輯

單元格被編輯，且值發生改變時觸發，回撥函式返回一個object引數，攜帶的成員如下

  //監聽單元格編輯
        table.on('edit(userTable)', function(obj){ //注：edit是固定事件名，test是table原始容器的屬性 lay-filter="對應的值"
            console.log(obj.value); //得到修改後的值
            console.log(obj.field); //當前編輯的欄位名
            console.log(obj.data); //所在行的所有相關資料
            //實際上要更新資料庫資料
            //所以要呼叫$.post("url?"+obj.field+"&id="+obj.data.id,function(json)){}
        });

4：監聽行單雙擊事件

//監聽行單擊事件
        table.on('row(userTable)', function(obj){
            console.log(obj.tr) //得到當前行元素物件
            console.log(obj.data) //得到當前行資料
            obj.del(); //刪除當前行,真正刪除要修改資料庫資料
            //obj.update(fields) //修改當前行資料
        });

        //監聽行雙擊事件
        /*table.on('rowDouble(teuserTablest)', function(obj){
            //obj 同上
        });*/

5：監聽table模組的工具條事件

<%--表格中右邊的按鈕--%>
<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="del">刪除</a>
</script>

//監聽工具條
        table.on('tool(userTable)', function(obj){ //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值"
            var data = obj.data; //獲得當前行資料
            var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 引數對應的值）
            var tr = obj.tr; //獲得當前行 tr 的 DOM 物件（如果有的話）
            if(layEvent === 'del'){ //刪除
                layer.msg("刪除")
                layer.confirm('真的刪除行麼', function(index){
                    obj.del(); //刪除對應行（tr）的DOM結構，並更新快取
                    layer.close(index);
                    //向服務端傳送刪除指令
                });
            } else if(layEvent === 'edit'){ //編輯
                //do something
                //同步更新快取對應的值
                layer.msg("修改")
                /*obj.update({
                    username: '123'
                    ,title: 'xxx'
                });*/
            }
        });