layui學習之13table表格數據 監聽事件

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'
                });*/
            }
        });