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 
 
为了使用方便， 我还将其封装成一个treeUtil对象, 代码在附件中, 使用时引用这个js文件, 调用函数时在前面加个treeUtil.就行了. 
 
[/size] 
 
 
  
 
   
treeUtil.zip (839 Bytes)
 
   
下载次数: 17
 
  
 
  
 
   
 
   
大小: 17.2 KB
 
  
 
  
 
   
查看图片附件