layui tree 编辑回显数据 父节点checked为true会 导致子节点被自动全选bug解决方法

Layui 版本

v2.5.6
还原被压缩的JS地址.

修改145行位置代码为下面这样:

            if ("object" == typeof i.children || e.find("." + v)[0]) {
                var r = e.find("." + v).find('input[same="layuiTreeCheck"]');
                if(sessionStorage.getItem('checkChild')!=="false"){//初始化页面
                r.each(function() {
                    this.disabled || (this.checked = t)
                });
                }else{
                    if(!t) {
                        r.each(function () {
                            this.disabled || (this.checked = t)
                        });
                    }
                }
            }

调用代码:

                    sessionStorage.setItem('checkChild',"false");//初始化去掉全选功能
                    tree.render({
                        elem: '#RoleMenuTree'
                        , data: treeData
                        , showCheckbox: true  //是否显示复选框
                        , id: 'RoleMenu'
                        //  , isJump: true //是否允许点击节点时弹出新窗口跳转
                        ,accordion: true   //手风琴模式展开一个自动收缩上一个
                        , click: function (obj) {
                            let data = obj.data;  //获取当前点击的节点数据
                            layer.msg('状态:' + obj.state + '<br>节点数据:' + JSON.stringify(data));
                        }
                    });
                    sessionStorage.setItem('checkChild',"true");//初始化页面完成后恢复全选功能

实现效果为:当初始化tree的时候禁用全选功能(防止父节点有checked属性导致全选子节点)。初始化完成后,恢复全选,通过sessionStorage控制

参考过此文章作者的思路:https://blog.csdn.net/qq_33556442/article/details/109800175

另说明:上面的修改方法存在不足之处为:数据量大了,效率指数下降,完美的解决方法可采用Layui Tree 禁用选中父节点后自动选中子节点(编辑初始化页面)解决方法二 才是正道。在145行位置不管是添加checkChild标识判断还是读取sessionStorage判断都存在严重影响render效率问题。

 

posted @ 2022-10-04 00:13  IT情深  阅读(539)  评论(0)    收藏  举报