Layui Tree 禁用选中父节点后自动选中子节点(编辑初始化页面)

Layui 版本
v2.5.6
还原被压缩的JS地址 .
在这里插入图片描述

问题描述
在做权限管理时用了layui tree 组件,编辑功能回显出现问题:只要父级被选中那么子级同样也会被选中
如下图所示,本来保存数据的时候只勾中了父级下的某个子级,但是在编辑的时候回显数据就会被全选
新增时选中的节点
编辑时选中的节点

解决方案1
参考解决方案地址1 .
参考解决方案地址2 .

1.HTML代码

<div class="treebox">
     <div id="tree" class="demo-tree demo-tree-box"></div>
 </div>

2.渲染树形JS代码,checkChild:false代表当父级被选中子级不会被全选中

function funInitMenuTree(result) {
   tree.render({
        elem: '#tree' , 
        data: result,
        showLine : true,
        showCheckbox: true,
        id: 'id', 
        checkChild:false
    });
}

3.找到b.prototype.config这行代码,加上参数checkChild

//默认配置
b.prototype.config = {
     data: [],//数据
     showCheckbox: !1,//是否显示复选框
     showLine: !0,//是否开启连接线
     accordion: !1,//是否开启手风琴模式
     onlyIconControl: !1,//是否仅允许节点左侧图标控制展开收缩
     isJump: !1,//是否允许点击节点时弹出新窗口跳转
     edit: !1,//是否开启节点的操作图标
     checkChild:1,
     text: {
         defaultNodeName: "未命名",//节点默认名称
         none: "无数据"//数据为空时的文本提示
     }
 }

4.找到b.prototype.setCheckbox = function(e, i, a)这行代码 ,修改成下面这样

if ("object" == typeof i.children || e.find("." + v)[0]) {
     var r = e.find("." + v).find('input[same="layuiTreeCheck"]');
     if(this.config.checkChild){//同步子节点选中状态
         r.each(function() {
             this.disabled || (this.checked = t)
         });
     }else{
         if(!t){
             r.each(function() {
                 this.disabled || (this.checked = t)
             });
         }
     }
 }

5,修改完了之后重新运行代码查看效果,编辑时选中的节点都是正常的
备注:修改后没有全选功能
在这里插入图片描述

解决方案2
解决方案1还是存在缺陷,全选功能没有了,一般来说全选功能还是要存在的

1.HTML代码

<div class="treebox">
     <div id="tree" class="demo-tree demo-tree-box"></div>
 </div>

2.渲染树形JS代码,默认初始化页面时去掉全选功能,初始化页面完成后恢复全选功能

function funInitMenuTree(result) {
     localStorage.setItem('checkChild',"false");//初始化去掉全选功能
     tree.render({
         elem: '#tree' , 
         data: result,
         showLine : true,
         showCheckbox: true,
         id: 'id'
     });
     localStorage.setItem('checkChild',"true");//初始化页面完成后恢复全选功能
 }

3.找到b.prototype.checkClick = function(e, a)这行代码 ,修改成下面这样

b.prototype.checkClick = function(e, a) {
    var n = this,
        t = n.config,
        r = e.children("." + p),
        l = r.children("." + f);
    l.on("click", 'input[same="layuiTreeCheck"]+', function(r) {
        layui.stope(r);
        var l = i(this).prev();
        var c = l.prop("checked");
        if(localStorage.getItem('checkChild')=="false"){//初始化页面
            l.prop("disabled") || (t.oncheck && t.oncheck({
                elem: e,
                checked: c,
                data: a
            }));
        }else{//点击复选框
            l.prop("disabled") || (n.setCheckbox(e, a, l), t.oncheck && t.oncheck({
                elem: e,
                checked: c,
                data: a
            }));
        }
    });
}

4,修改完了之后重新运行代码查看效果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值