关于eleTree的选中问题,(setChecked后和重置,全选后)

在使用eleTree时发现,当使用el.expandAll()方法展开所有时,会重新生成树状结构,会按照默认选中重新渲染(defaultCheckedKeys),在修改了defaultCheckedKeys数组后,渲染的始终是使用这个数组

  • 这样就有个问题,我之前手动选中的节点,在点击展开后将不复存在.于是就想到是不是应该在点击节点的同时,删除或者添加key到defaultCheckedKeys数组
  • 试了一些办法,最后这种笨方法貌似达到了我要的效果(测试了下好像没问题),但是我对于 @凉宫
    大神源码也没做深入的研究,在此贴出,希望能帮到需要的朋友,同时也希望有大神能进行一些指正,或者提出更好的办法

修改如下


 // checkbox选中
        checkboxEvent: function() {
            var options=this.config;
            var _self=this;
            var checkOnClickNode=options.checkOnClickNode?".eleTree-node-content":".eleTree-checkbox";
            // input添加属性eleTree-status:即input的三种状态,"0":未选中,"1":选中,"2":子孙部分选中
            options.elem.on("click",checkOnClickNode,function(e,type) {
                e.stopPropagation();
                var eleTreeNodeContent=$(this).parent(".eleTree-node").length===0?$(this).parent(".eleTree-node-content"):$(this);
                var checkbox=eleTreeNodeContent.children(".eleTree-checkbox");
                if(checkbox.hasClass("eleTree-checkbox-disabled")) return;
                // 获取点击所在数据
                var node=eleTreeNodeContent.parent(".eleTree-node");
                 var d=_self.reInitData(node).currentData;
                // 实际的input
                var inp=checkbox.siblings(".eleTree-hideen").get(0);
                var childNode=eleTreeNodeContent.siblings(".eleTree-node-group").find("input[name='eleTree-node']");

                // 添加active背景
                if(_self.prevClickEle) _self.prevClickEle.removeClass("eleTree-node-content-active");
                if(options.highlightCurrent) eleTreeNodeContent.addClass("eleTree-node-content-active");
                _self.prevClickEle=eleTreeNodeContent;
                
                if(!inp){
                    return;
                }
//===========================================修改 begin======================================//
                //递归删除和添加defaultCheckedKeys方法,取消最里面的key.------------------------------------------------------.修改
                function getfooterkey(d, add) {
                    if (d.children) {
                        $.each(d.children, function () {
                            getfooterkey(this,add);
                        })
                    } else {
                        if (!add && ((index = options.defaultCheckedKeys.indexOf(d.id)) !== -1)) {
                            options.defaultCheckedKeys.splice(index, 1);
                        } else if (add && $.inArray(d.id, options.defaultCheckedKeys) === -1) {
                            options.defaultCheckedKeys.push(d.id);
                        }
                    }
                        
                }
//===========================================修改 end======================================//
                if (inp.checked) {
                    // 反选自身
                    $(inp).prop("checked",false).attr("eleTree-status","0");
                    // 点击祖父层选中子孙层
                    if(!options.checkStrictly){
                        childNode.prop("checked",false);
                        childNode.attr("eleTree-status","0");
                    }
//===========================================修改 begin======================================//
                    //删除父元素keys----------------------------------------------------------------------修改
                    var oNode = node;
                    while (oNode.length != 0) {
                        oNode = oNode.closest(".eleTree-node");
                       if ((index = options.defaultCheckedKeys.indexOf($(oNode).data("id"))) !== -1) {
                           options.defaultCheckedKeys.splice(index, 1);
                       }
                       oNode = oNode.closest(".eleTree-node-group");
                    }
                    getfooterkey(d);
//===========================================修改 end======================================//
                }else{
                    // 反选自身
                    $(inp).prop("checked",true).attr("eleTree-status","1");
                    // 点击祖父层选中子孙层
                    if(!options.checkStrictly){
                        childNode.prop("checked",true).attr("eleTree-status","1");
                    }
//===========================================修改 begin======================================//
                    getfooterkey(d,true);
//===========================================修改 end======================================//
                }

                var eleNode=eleTreeNodeContent.parent(".eleTree-node");
                // 点击子孙层选中祖父层(递归)
                if(!options.checkStrictly){
                    var siblingNode=eleNode.siblings(".eleTree-node");
                    // 点击子孙层选中祖父层(递归)
                    _self.selectParents(inp,eleNode,siblingNode);
                }
                
                _self.checkboxRender();

                if(type==="default") return;
                layui.event.call(inp, MOD_NAME, 'nodeChecked('+ _self.filter +')', {
                    node: eleNode,
                    data: _self.reInitData(eleNode),
                    isChecked: inp.checked
                });
            })
        },

为了看的明白,我将整个checkboxEvent方法拷贝了…只需替换源码这个方法即可。

setChecked(arr, isReset),第二个参数为真时替换原默认选中数组,否则是在默认数组末尾添加

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值