Ext Tree使用笔记

      最近做项目对Ext Tree做了一些简单应用，进行一个简单总结，与大家分享。

之前使用dTree，这个JS短小精悍，功能也不逊色，特别是它的cookie记录功能，让我们省了不少的事，不过缺点就是不支持异步查询。后来转换到了Ext Tree上。下面是一些应用场景和总结。欢迎大家指导。

 

1、同步树：

     创建TreePanel，设置属性，添加一个根节点，并展开树。

var Tree = Ext.tree;
var tree = new Tree.TreePanel({   
      el:'treeDiv',   
      autoScroll:true,
      autoHeight:true,
      animate:true,
      enableDD:true,
      loader: new Tree.TreeLoader({
	    dataUrl:'tree.do'   
      })
});   

// set the root node   
var root=new Ext.tree.TreeNode({
   id : "root",
   text : "操作列表"
});

tree.setRootNode(root);
	
// render the tree
tree.render();
root.expand();
root.select();

 

2、异步树：

    为同步树树添加异步子节点，并指定其连接地址。

node.on('expand', getSubTree);

    指定展开节点时如何触发异步查询

 

function appendToRoot(root, n){	 
    var roots = document.getElementsByName(n.id);
    //alert(roots.length);
    if(roots != null){
    	for(var i = 0; i < roots.length; i++){
    		var rr = roots[i].value;
    		if(rr == null || rr.length == 0){
    			continue;
    		}
    		//alert(rr);
    		var id_ = rr.split(",")[0];
    		var text_ = rr.split(",")[1];
	    	var node = null;		    
		var hasChild = rr.split(",")[2];
		var isLeaf = (hasChild == "true") ? false : true;
		node = new Ext.tree.AsyncTreeNode({
			id: id_,
			text : text_,
			href : "Handle.do?id=" + id_ ,
		        hrefTarget : "main",
		        leaf : isLeaf,
			children : [{
			       text : 'loading',
			       iconCls : 'loading',
			       leaf : false
			}]
		});
			    
		node.on('expand', getSubTree);		    
			
		root.appendChild(node);
    	}
    }	    
}

      异步查找子节点。

function getSubTree(node){
	if(node.firstChild.text=='loading'){
		Ext.Ajax.request({
			url: 'tree.do',
			params: {node : node.id},
			method: 'POST',
			timeout: 60*1000, //1分钟
			success: function(v){
				//成功返回
				var myData = eval(v.responseText); // 得到服务器返回的json串 
				if(v.responseText == null || myData.length == 0){				
					node.firstChild.remove();
					return;
				}
				
				for(var i = 0; i < myData.length; i++){
					var cnode = new Ext.tree.AsyncTreeNode({
						id : myData[i].id,
						text : myData[i].text,
						leaf : myData[i].isLeaf,
						href : "Handle.do?id=" + myData[i].id,
						hrefTarget : TARGET,
						children : [{
                  //添加子节点,如果服务器返回tl[i].leaf为true则孩子节点将无法显示
							text : 'loading',
							iconCls: 'loading',
							leaf:true
						}]
					});
					
					cnode.on('expand',getSubTree);					
					node.appendChild(cnode);
				}
				node.firstChild.remove();//删除当前节点第一个孩子节点(loading节点)
			},
			// 失败
			failure: function(){
				alert("获取子节点出错");
			}
		});
	} 
}

      服务器端的代码片段：

	public List<Map<String, Object>> getSubTree(String id, String type) {
		try {
			List<Map<String, Object>> retList = new ArrayList<Map<String, Object>>();
			List<ChnTreeNode> list = getManage().getRankingManage().getChilds(id);			
			for(ChnTreeNode node : list) {				
				Map<String, Object> tree = new HashMap<String, Object>();
				String nodeType = node.getType();
				
				if(filterNode(nodeType, type)){
					continue;
				}
				//节点的id    
				tree.put("id", node.getId());
				//节点显示单位名              
				tree.put("text", node.getText());
				//是否是叶子节点  
				tree.put("isLeaf", Boolean.valueOf(node.isLeaf()));
				//类型
				tree.put("type", nodeType);
				//将这个生成叶子节点对应的MAP加到单位list里   
				retList.add(tree);
			}
			return retList;
		} catch (Exception e) {
			log.error("获取子节点列表失败：" + e.getMessage());
			return null;
		}
	}

	public static boolean filterNode(String nodeType, String type) {
		if("1".equals(type)){
			return false;
		}else{
			int type_ = Integer.parseInt(type);
			if(nodeType.substring(type_-2, type_-1).equals("1")){
				return false;
			}else{
				return true;
			}
		}
	}

	public JSONArray getModuleTree(String id, String type) {
		List<Map<String, Object>> list = this.getSubTree(id, type);
		if (list == null) {
			return null;
		}
		//转换这个list让他变成json格式       
		JSONArray jsonArray = JSONArray.fromObject(list);
		return jsonArray;
	}

	public ActionForward tree(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		String id = request.getParameter("node");
		String type = request.getParameter("filter");
		
		JSONArray jsonArray = getModuleTree(id, type);
		response.setContentType("text/json; charset=GBK");
		try {
			response.getWriter().print(jsonArray);
		} catch (IOException e) {
			log.error("输出json失败" + e.getMessage());
			return null;
		}

		return null;
	}

 

3、自定义节点属性：

      从2中的服务器端代码看到我们自定义了type属性，这样返回的JSON字符串，就可以获得这个属性设置到树的TreeNode中，那么我们如何取得这个属性呢，可以用这样的代码：

node.attributes.type 

4、复选框支持：

      经常有这样的应用场景，就是我们的树节点是支持多选的，这时候我们可以为树节点添加checked属性，监听复选事件，可以用下面的代码：

node.on('checkchange', checkChange);
...

function checkChange(node, checked){
	//node.expand();
	node.attributes.checked = checked;
	node.eachChild(function(child) {     
		child.ui.toggleCheck(checked);     
		child.attributes.checked = checked;
		child.fireEvent('checkchange', child, checked);     
	});
}

     上面的操作还能够实现点选父节点时，将所有它的子节点也选择。如何获得复选框的值呢，请看5.

 

5、递归取值：

     下面的方法是采用递归函数的方式遍历整个节点子树，将所有值保存到了Array中，不知Ext Tree有没有提供这样的功能，如果有，请大家一定要告诉我，谢谢！

function handleSelect(node, chnIds){
	if(node.attributes.checked){
		if(!contains(chnIds, node.id)){
			chnIds.push(node.id);
		}
		return;
	}else{
		node.eachChild(function(child) {
			handleSelect(child, chnIds);    
		});
	}
} 

 

6、remove的问题：

      先看一段代码：

var children = root.childNodes;
for(var i = 0; i < children.length; i++){
     root.removeChild(children[i]);
}

      如果使用上面的代码，我们会发现删除总是会出现逻辑问题，最开始我也很是疑惑，明明length为3，为什么只执行两次呢，原来是删除的同时，root节点孩子的数目和每个孩子所处的下标都是变化的，我们可以用这段代码来代替：

while(root.firstChild){
     root.removeChild(root.firstChild);
} 

 

7、TreeFilter的应用：

      TreeFilter可以实现按条件过滤的功能，树的节点在展示的时候，会考虑TreeFilter的过滤来决定显示那些节点，隐藏那些节点，它的用法很简单：

var filter = new Ext.tree.TreeFilter(tree, {
    clearBlank: true,
    autoClear: true
});

filter.filterBy(function(n){
    if(n.id.substring(0, 1) == "N"){
         return false;
    }else{
         return true;
    }
});

      上面的代码会过滤掉所有id以字母N开头的节点。

 

8、注意事项：

      对于异步树节点，如果不同节点可能来自不同数据表的时候，如果我们利用表的主键做ID，我们要防止节点的ID重复，可以在在取得的主键ID前面增加字符串做标识，后台再截取。

 

9、问题：

     点击历史的记录，这个对于异步树有点难度，大家是怎么做的呢？

     对节点的页面级的缓存

 

参考：

http://beckrabbit.iteye.com/blog/132995

http://kingapex.iteye.com/blog/150806

http://www.iteye.com/topic/133269

http://www.easyjf.com/bbs.ejf?cmd=appShow&id=5734416

http://jstang.5d6d.com/thread-844-1-1.html

评论

6 楼 lixw 2009-10-30  

hbkjdx205 写道

在这个方法public List<Map<String, Object>> getSubTree(String id, String type) 中下面一行是什么意思，特别是ChnTreeNode 是自定义的类型吗？

        List<ChnTreeNode> list = getManage().getRankingManage().getChilds(id);

ChnTreeNode 是自定义的类型，对树节点的一个封装，下面的代码是从数据库获取子节点列表，这个你可以由你的应用来决定。

5 楼 hbkjdx205 2009-10-26  

在这个方法public List<Map<String, Object>> getSubTree(String id, String type) 中下面一行是什么意思，特别是ChnTreeNode 是自定义的类型吗？

        List<ChnTreeNode> list = getManage().getRankingManage().getChilds(id);

4 楼 lixw 2009-07-16  

TheMatrix 写道

能提供源码吗？

您好，我的代码特别凌乱，也不好提供，怕有误人之嫌，我建议你可以参考一下Ext2.0.2发布包中examples\tree目录的例子，其中reorder.js就是一个异步树的例子，谢谢。

3 楼 TheMatrix 2009-07-14  

能提供源码吗？

2 楼 lixw 2008-12-10  

weiruan85 写道

很好，很强大，收藏了先

谢谢关注！

1 楼 weiruan85 2008-12-10  

很好，很强大，收藏了先