欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 23:01:38
...

根据后端返回的 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);
            })
});
相关标签: layui