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