LAYUI 数据表格 复选

框实现

在Layui中，数据表格的复选框可以通过设置checkbox属性来实现。具体步骤如下：

1. 在表格的cols属性中添加一个复选框列，设置type为checkbox。

2. 在表格的data属性中添加选中状态的字段，例如layChecked。

3. 在表格的onCheckbox事件中处理选中状态的更新，例如将选中的行的layChecked字段设置为true，取消选中的行的layChecked字段设置为false。

示例代码如下：

HTML代码：

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

JavaScript代码：

layui.use(['table'], function() {
    var table = layui.table;
    table.render({
        elem: '#demo',
        url: '/demo/table/user/',
        cols: [[
            {type: 'checkbox'},
            {field: 'id', title: 'ID'},
            {field: 'username', title: '用户名'},
            {field: 'email', title: '邮箱'},
        ]],
        page: true,
        limit: 10,
        height: 'full-200',
        done: function(res, curr, count) {
            // 数据渲染完成后更新选中状态
            var tableData = res.data;
            var checkboxStatus = {};
            for (var i = 0; i < tableData.length; i++) {
                var rowData = tableData[i];
                if (rowData.layChecked === true) {
                    checkboxStatus[rowData.id] = true;
                } else {
                    checkboxStatus[rowData.id] = false;
                }
            }
            table.setChecked('test', checkboxStatus);
        },
        onCheckbox: function(obj) {
            // 处理选中状态的更新
            var rowData = obj.data;
            rowData.layChecked = obj.checked;
        }
    });
});

在这个示例中，我们设置了一个复选框列，用来显示和操作选中状态。在表格数据渲染完成后，我们通过遍历数据来更新选中状态，然后调用table.setChecked方法来设置选中状态。在选中状态改变时，我们通过onCheckbox事件来处理选中状态的更新。具体实现可以参考上面的代码。