layui tree组件 回显bug(只要勾选一个子集在回显的时候会勾选全部子集)

作者：残城碎梦 围观群众：638 更新于 2023-05-02 18:20:21 标签：layuitree组件layui tree 组件bug

描述

最近在写一个Java项目，因为用的是Layui框架，在做权限的时候用到了layui的tree组件，结果在回显的时候发现明明只选中了一个子集，但是却把所有的子集菜单都实例成了选中状态。效果如下图所示
勾选效果
 

回显效果
 

原因分析

在网上寻找很长时间，最终没有找到自己想要的解决办法。分析源码发现了问题所在，大体流程是选中了子树，代码中会勾选该子树的父级元素。而选择了父级元素程序中回将该树的全部子集元素置于选中状态。问题也就这样产生了。

解决思路

1.打破这种关联，让选中父级元素的时候可以控制是否关联子集元素。
在tree.js中全局搜索以下代码（压缩过的子集格式化下代码），加上如下判断

b.prototype.setCheckbox = function(e, i, a)

实例化tree的时候，多添加一个配置项checkChirld

  tree.render({
   
            elem: '#permissionTree'
            ,checkChirld:false //是否关联子集菜单
            ,data: [[${
   tree}]]
            ,showCheckbox: true  //是否显示复选框
            ,id: 'treeId'
            ,isJump: false //是否允许点击节点时弹出新窗口跳转
            ,showLine: false
        });

这样改动完数据回显的问题解决了。但是想要勾选子集菜单只能一个一个去点，不能通过勾选父级菜单来全选子集了（解决回显问题的延伸问题）
2.我发现只要在显示的时候不让他关联子集选中状态。执行完一次就让他可以关联子集选中状态。这就是我想要的了。
在tree.js中 在render方法的最后将checkChirld改为true。实例化的时候不关联子集。执行完实例化，关联子集菜单。

 b.prototype.render = function() {
   
                var e = this,
                    a = e.config;
                e.checkids = [];
                var n = i('<div class="layui-tree' + (a.showCheckbox ? " layui-form": "") + (a.showLine ? " layui-tree-line": "") + '" lay-filter="LAY-tree-' + e.index + '"></div>');
                e.tree(n);
                var t = a.elem = i(a.elem);
                if (t[0]) {
   
                    if (e.key = a.id || e.index, e.elem = n, e.elemNone = i('<div class="layui-tree-emptyText">' + a.text.none + "</div>"), t.html(e.elem), 0 == e.elem.find(".layui-tree-set").length) return e.elem.append(e.elemNone);
                    a.showCheckbox && e.renderForm("checkbox"),
                        e.elem.find(".layui-tree-set").each(function() {
   
                            var e = i(this);
                            e.parent(".layui-tree-pack")[0] || e.addClass("layui-tree-setHide"),
                            !e.next()[0] && e.parents(".layui-tree-pack").eq(1).hasClass("layui-tree-lineExtend") && e.addClass(k),
                            e.next()[0] || e.parents(".layui-tree-set").eq(0).next()[0] || e.addClass(k)
                        }),
                        e.events()
                }
                this.config.checkChirld = true;
            },

最后欢迎大家访问我的个人博客网站:zShare个人博客