Layui表格添加操作列

html:

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="update">更新</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

js:

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

            table.render({
                elem: '#test'

              , url: '/home/getdata'
              , limit: 5
              , limits: [5, 10, 15, 20]
              , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
              , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
              , cols: [[
                 { type: 'checkbox', fixed: 'left' }
                , { field: 'Id', width: 80, title: 'ID', sort: true }
                , { field: 'UserName', title: '用户名' }
                , { field: 'Number', title: '学号', sort: true }
                , { field: 'UClass', title: '班级' }
                , { field: 'CheckType', title: '状态' } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , { field: 'IDCard', title: '积分', sort: true }
                , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
              ]], page: true
            });



            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;

                        //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });


            //监听行工具事件
            table.on('tool(test)', function (obj) {

                var data = obj.data;

                console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                }
                else if ("update" == obj.event) {
                    alert("你点击了更新");
                }
                else if (obj.event === 'edit') {
                    layer.prompt({
                        formType: 2
                      , value: data.email
                    }, function (value, index) {
                        obj.update({
                            email: value
                        });
                        layer.close(index);
                    });
                }
            });

        });

注意：table.on('tool(test)'

layui绑定事件的时候这里的test并不是表格的id，而是lay-filter="test",所以这里如果没有写lay-filter熟悉事件是绑定不了的。其实可以看到如果是用的id的情况，layui前面也是会加#井号的