ExtJs3.4 TreePanel级联勾选节点并实现父节点节点半选_extjs treepanel 设置级联选中后, itemclick中也让勾选节点-优快云博客

本文介绍如何在ExtJS 3.4中实现树形控件(TreePanel)的级联勾选功能，并确保父节点在子节点选择时能够正确显示半选状态。通过具体的JavaScript代码示例，详细展示了如何控制节点的选中、取消选中及半选状态。

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;
		}
	}
});

效果图：