layui treetable-lay多选框checkbox默认选中

阳光穿透心脏的1/2处 2023-03-02 07:38 32阅读 0赞

根据后端返回的 checked 字段来判断是否选中

layui.config({
        
                base: '/static/layui/'
            }).extend({
        
                treeTable: 'treetable/treetable'
            });
            layui.use(['treeTable'], function () {
        
                var $ = layui.jquery;
                var treeTable = layui.treeTable;
                treeTable = $.extend(treeTable, {
         config: {
         checkName: 'checked' } });
                var insTb = treeTable.render({
        
                    elem: '#demoTreeTb',
                    height: '480px',
                    tree: {
        
                        iconIndex: 0,           // 折叠图标显示在第几列
                        isPidData: true,        // 是否是id、pid形式数据
                        idName: 'menuId',  // id字段名称
                        pidName: 'parentId'     // pid字段名称
                    },
                    cols: [
                        {
         field: 'name', title: '节点名称' },
                        {
         field: 'path', title: '路径' },
                        {
        
                            field: 'state', title: '状态', templet: function (res) {
        
                                if (res.state == 0) {
        
                                    return '已禁用'
                                } else {
        
                                    return '可用'
                                }
                            }
                        },
                        {
         fixed: 'right', type: 'checkbox', width: 150 }
                    ],
                    reqData: function (data, callback) {
        
                        // 在这里写ajax请求，通过callback方法回调数据
                        $.get('/system/resource/list', function (res) {
        
                            if (res.code == 0) {
        
                                var data = res.data;
                                for (var x in data) {
        
                                    console.log(data[x])
                                    if (data[x].checked) {
        
                                        data[x]["LAY_CHECKED"] = 'true';
                                        var index = res.data[x]['LAY_TABLE_INDEX'];
                                        $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                        $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                                    }
                                }
                                callback(res.data);
                            }
                            else callback(res.msg);
                        });
                    }
                });
                //监听行工具事件
                treeTable.on('tool(demoTreeTb)', function (obj) {
        
                    var data = obj.data;
                    var id = data.id;
                    console.log(data.id)
                    if (obj.event === 'remove') {
        
                    } else if (obj.event === 'edit') {
        
                    }
                });
              var checkStatus;
                //复选框
                treeTable.on('checkbox(demoTreeTb)', function (obj) {
        
                    console.log(insTb.checkStatus());
                });
                $("#save").click(function () {
        
                    console.log(checkStatus);
                })
    });