layui快速入门（二）——数据表格事件监听

前端建立一个table标签

<table id="demo" lay-filter="table"></table>

1、表头工具栏

这个layui的表头工具栏是独立于表格的，是附加上去的，就是把一个盒子放到表格上面

第一步，所以我们先建立一个盒子，但是这是一个特殊的盒子，需要对其隐藏：

<div class="layui-hide layui-btn-group" id="toolbar">
    <button class="layui-btn " lay-event="getall">查看所选数据</button>
    <button class="layui-btn " lay-event="getnum">查看所选数量</button>
    <button class="layui-btn  layui-btn-danger" lay-event="delall">批量删除</button>
</div>

layui-hide隐藏属性，layui-btn-group组按钮，lay-event事件的名称

layui-event设置的对应的值，来进行不同的行为

第二步，我们在表格模块里引入我们的头部盒子，然后监听事件

layui.use('table',function(){
       var table = layui.table;       table.render({
           elem:'#demo'//上面表格ID名称
           ,url:'数据接口' 
           ,toolbar:'#toolbar'//开启头部栏，写入我们的盒子id
           ,cols[[…………]]
       });
    });

小知识点：获取传来的数据  JSON.stringify(data.field)

查看出来的数据  layer.msg(JSON.stringify(data.field));
data.field代表整个form表单中的值，data.field.username代表某个属性值

表格渲染就完毕

    table.on('event(lay-filter)',function(obj){ 
    //这是格式，event有toolbar头部栏事件，tool行标签事件，edit编辑事件，等等，
    括号里的当然就是给表格设置的lay-filter属性
    obj是这个表格里所有的数据，我们可以console.log(obj)来查看有哪些数据！！
    })
    例如：
     //监听工具条
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            var tr = obj.tr;
            var $ = layui.jquery;
            if(layEvent === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
              } else if(layEvent === 'del'){
                //layer.msg("删除");
                  layer.confirm('确定删除管理员:'+data.username+"吗？", function(index){
                    $.ajax({
                        url:'/index.php/admin/Admin/userDel.html?id='+data.id,
                        type:'get',
                        dataType:'json',
                        data:{'id':data.id},//向服务端发送删除的id
                        success:function(res){
                            if(res == true){
                                layer.msg("删除成功",{icon:6});
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                               
                            }else{
                                layer.msg("删除失败",{icon:5});
                            }
                        }
                    });
                });
              } else if(layEvent === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
              }
            });