layui.table 头部工具栏与行工具栏的实例

书接上文，话说这 layui 建好数据表格之后，后面往往还要加上几个按钮，上面可能还有个批量删除什么的，今天主要来说说这些功能是怎么实现的。
首先是html页面，还是就一个空 table ，代码如下：

生成数据表格的 js 代码如下：

function table(){
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                //对象表格的id
                elem: '#layTable'
                //头部工具栏
                ,toolbar: '#toolbarDemo'
                //请求路径
                ,url:'http://127.0.0.1:8087/api/table'
                //数据
                ,cols: [[
                    //复选框，fixed为固定位置，即该复选框永远在表格最左侧，同理下面的行内工具栏永远在最右侧
                    {type: 'checkbox', fixed: 'left'}
                    //layui 2.40之后的新特性，可以增加一个 hide:true 属性，隐藏该列
                    ,{field:'id', width:80, title: 'ID', sort: true}
                    ,{field:'name', width:80, title: '用户名'}
                    //行内工具栏
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150,align:'center'}
                ]]
                //开启分页
                ,page: true
            });
        });
    }

复选框是为了增加批量删除功能而添加的，增加的头部工具栏和行内工具栏内有一个toolbar属性，该属性的值对应下列 js 的 id 属性。

注意此处有一 lay-event 属性，将在下文用到。此时页面会变成这样：

接下来就剩给工具栏的按钮添加事件了，代码如下：

layui.use('table', function(){
        table = layui.table;

        //监听行工具事件
        table.on('tool(tableTest)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //关闭该 confirm 窗口
                    layer.close(index);
                    layer.alert("已删除id为"+data.id+"的行");
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type:2,
                    title:"修改名称",
                    content:"jump.html?id="+data.id,
                })
            }
        });

        //头工具栏事件
        table.on('toolbar(tableTest)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'delAll':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
            };
        });
    })

首先说 table.on 绑定表格时，tool() 方法即是监听行内工具栏，toolbar() 方法是监听头部工具栏。
方法的参数对应 html 页面中 table 标签的 lay-filter 属性。
然后是 obj.event ，对应上一段代码中的 lay-event 属性。
可以看到，删除方法中可以直接用 data.id 获取表格中的 id 字段。

如图中所示，已经取到了行内的 id,就可以用ajax请求相应的删除方法了。
头部的批量删除方法跟删除一样，用 checkStatus.data 来获取被选中的复选框，即可得到需要的行内数据(该数据为对象数组)，再用ajax向后台请求就好了。

最后再说比较麻烦的打开新页面，可以直接用 lay.open 打开新的页面，在 content 属性中输入要打开的页面的相对路径，在后面把参数传过去就可以了。在新打开的页面可以用如下代码接收传过来的参数：

运行结果如下：

可以看到 id 已经成功传到了新的页面，该页面取到 id 之后即可调用 ajax 请求查询新的数据。