在使用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),第二个参数为真时替换原默认选中数组,否则是在默认数组末尾添加