Ext TreePanelrcheckbox级联选择的实现

[size=medium]

    Ext的treepanel 没有自带checkbox级联选择效果，因为用得着，所以自己动手写了个， 现将代码分享一下， 欢迎批评指正。
由于我在改变节点复选框的选中状态后没有调用其onCheckChange()方法, 所以在获取已选中的节点时不能使用tree.getSelected()方法. 于是自己也相应为自己的级联添加了getSelected()方法.代码是用editplus写的, 没有用IDE, 为节省功夫, 注释不是很规范, 请见谅.



下面是测试代码：

Ext.onReady(function(){
	var root=new Ext.tree.TreeNode({
		text:"root",
		id:"root",
		checked:false
	});
	var tree=new Ext.tree.TreePanel({
		renderTo:Ext.getBody(),
		width:200,
		root:root,
		listeners:{
			"checkchange": function(node){
				cascadeCheck(node);
			}
		},
		buttons:[{
			text:"显示已选",
			handler:function(){
				var selected=getSelected(root);
				//alert(selected.length);
			}
		}]
	});

	for(var first=0;first<3;first++){
		var flNode=new Ext.tree.TreeNode({
			text:"第一级目录_"+first,
			id:"first_level_"+first,
			checked:false
		});
		root.appendChild(flNode);

		for(var second=0;second<3;second++){
			var slNode=new Ext.tree.TreeNode({
				text:"第二级目录_"+first+"_"+second,
				checked:false,
				id:"second_level_"+first+"_"+second
			});
			flNode.appendChild(slNode);

			for(var third =0;third<3;third++){
				var tlNode=new Ext.tree.TreeNode({
					text:"第三级目录_"+first+"_"+second+"_"+third,
					id:"third_level_"+first+"_"+second+"_"+third
				});
			}
		}
	}

	tree.expandAll();
	
});


function cascadeCheck(node){
	//调用函数改变子孙节点的状态
	changeChildrenStatus(node,isChecked(node));

	//调用函数改变祖先节点的状态
	changeParentStatus(node);

	//函数: 改变改变子孙节点的状态
	function changeChildrenStatus(node,checked){
		if(node.hasChildNodes()){
			node.eachChild(function(child){
				changeChildrenStatus(child,checked);
			});
		}
		node.ui.checkbox.checked=checked;
	}

	//函数: 改变祖先节点的状态
	function changeParentStatus(node){
		var parent=node.parentNode;
		if(!parent){
			return ;
		}

		var siblings=getSiblings(node);

		var checked=true;
		for(var i=0;i<siblings.length;i++){
			if(!isChecked(siblings[i])){
				checked=false;
			}
		}
		
		setChecked(parent, checked);
		changeParentStatus(parent);
	}

	//函数:得到节点的兄弟节点
	function getSiblings(node){
		var siblings=[];
		var parent=node.parentNode;
		if(parent){
			parent.eachChild(function(sibling){
				siblings.push(sibling);
			});
		}
		return siblings;
	}
}

//如果节点前的checkbook已被选中, 返回true, 否则返回false
function isChecked(node){
	return node.ui.checkbox.checked;
}

//将节点前的checkbook的选中状态设为checked
function setChecked(node, checked){
	node.ui.checkbox.checked=checked;
}

//得到一个节点下所有被选中的节点, 返回值为一节点数组 
function getSelected(root){
	var selected=[];

	if(isChecked(root)){
		selected.push(root);
	}
	
	root.eachChild(function(child){
		selected=selected.concat(getSelected(child));
	});

	 return selected;
}

为了使用方便， 我还将其封装成一个treeUtil对象, 代码在附件中, 使用时引用这个js文件, 调用函数时在前面加个treeUtil.就行了.
[/size]

评论

1 楼 jueyue 2013-05-25  

确实思路挺好的