ExtJs3.4 TreePanel级联勾选节点并实现父节点节点半选
代码如下
其中 .complete .x-tree-node-anchor span为ExtJs内置节点文本样式,可根据自己需求修改此样式
/**
* extjs级联勾选树节点
* .complete .x-tree-node-anchor span{text-decoration: line-through; color: #777}
*/
node.cascade(function(node){
node.attributes.checked = checked;
node.ui.checkbox.checked = checked;
node.attributes.halfChecked = false;
if(checked){
node.getUI().removeClass('complete');
}else{
node.getUI().addClass('complete');
node.getUI().checkbox.indeterminate = false;
}
});
node.bubble(function(node){
var total = 0;
var checkedCount = 0;
var hasHalfChecked = false;
var parentNode = node.parentNode;
if(parentNode!=null && parentNode!=root){
total = parentNode.childNodes.length;
var childNodes = parentNode.childNodes;
if(childNodes.length != 0){
for(var i=0; i<total; i++){
if(childNodes[i].attributes.checked){
checkedCount++;
}else if(childNodes[i].getUI().checkbox.indeterminate){
//下级节点存在半选状态的节点则上级节点全部为半选状态
hasHalfChecked = true;
}
}
}
if(total>checkedCount && checkedCount>0){
parentNode.attributes.checked = false;
parentNode.getUI().removeClass('complete');
parentNode.attributes.halfChecked = true;
parentNode.getUI().checkbox.checked = false;
parentNode.getUI().checkbox.indeterminate = true;
}else if(total == checkedCount){
parentNode.attributes.checked = true;
parentNode.getUI().removeClass('complete');
parentNode.attributes.halfChecked = false;
parentNode.getUI().checkbox.checked = true;
parentNode.getUI().checkbox.indeterminate = false;
}else if(hasHalfChecked){
parentNode.getUI().removeClass('complete');
parentNode.attributes.checked = false;
parentNode.attributes.halfChecked = true;
parentNode.getUI().checkbox.checked = false;
parentNode.getUI().checkbox.indeterminate = true;
}else if(checkedCount == 0){
parentNode.getUI().addClass('complete');
parentNode.attributes.checked = false;
parentNode.attributes.halfChecked = false;
parentNode.getUI().checkbox.checked = false;
parentNode.getUI().checkbox.indeterminate = false;
}
}
});
效果图: