Flex 动态树详解

搞了大半天终于把FLEX异步树实现了，效果先说明一下：页面初始化时只显示一个根目录（左边没有三角按钮可以点击），我是用tree控件的change方法触发事件的，然后通过远程对象调用java方法从数据库查出该目录的下一级目录，返回给flex显示。

下面看代码：
java端：简单，就一个根据目录id查询该目录的所有下一级目录

/**
	 * 返回的XML格式：	<node label="XXX" id="XXX">
						<node label="XXX" id="XXX"></node>
					</node>
		注意：需要有根节点把所有子节点包含住，	否则MXML中
											var str:String = e.result as String;
											var child:XML = new XML(str);
										会报错，不能new XML对象
	 */
	public String getTree(String catalogsid){
		String currcatalogname = getCatalogNameBySID(catalogsid);
		String startnode = "<node label=\""+currcatalogname+"\" id=\""+catalogsid+"\">";
		String endnode = "</node>";
		
		String flextreestr = "";
		ITreeService its = new ITreeServiceImpl();
		List<Map<String,String>> list = its.findCatalogbyParentsid(catalogsid);
		for(int i=0;i<list.size();i++){
			Map<String,String> map = (Map<String,String>) list.get(i);
//拼符合XML格式的字符串
			flextreestr = flextreestr + "<node label=" + "\"" + map.get("CATALOGNAME") + "\"" 
							+ " id=" + "\"" + map.get("CATALOGSID") + "\"></node>\n";
		}
		if(flextreestr!=null&&!flextreestr.equals("")){
			flextreestr = startnode+flextreestr+endnode;
		}
		return flextreestr;
	}
	
	//根据目录标识查目录名称  供返回给tree的XML用
	
	public String getCatalogNameBySID(String catalogsid){
		ITreeService its = new ITreeServiceImpl();
		return its.findCatalogNamebySID(catalogsid);
	}

本人是用ibatis操作数据库的。
看SQL语句

 <!-- 根据根据目录标识查下一级目录信息 自定义对象的参数要用"##"来表示，JDK自带类用'$$'来表示，比如String,Map等,Map的话取key-->
 <select id="findCatalogbyParentsid" parameterClass="String" resultClass="java.util.HashMap">
    select * 
    from t_catalog t 
    where t.parentsid='$catalogsid$'
    order by t.catalogname
 </select>
 <!-- 根据根据目录标识查目录名称-->
 <select id="findCatalogNamebySID" parameterClass="String" resultClass="String">
    select t.catalogname as catalogname
    from t_catalog t 
    where t.catalogsid='$catalogsid$'
 </select>

flex端：catalogtree.mxml是一个组件

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
	 backgroundColor="#FFFFFF" creationComplete="vsstree.send();initEvent()">
 	<mx:HTTPService id="vsstree" showBusyCursor="true" method="POST" url="xml/tree.xml" useProxy="false" result="httpResult(event)" resultFormat="e4x">
    </mx:HTTPService>
	
	<mx:Script>
		<![CDATA[
			import action.myevent.EventNames;
			import action.myevent.CustomEvent;
			import mx.modules.IModuleInfo;
			import mx.modules.Module;
			import mx.modules.ModuleManager;
			import model.loginsuccess;
			import mx.core.Application;
			import mx.controls.Text;
			import mx.events.TreeEvent;
			import mx.collections.ArrayCollection;
			import mx.collections.ICollectionView;
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
			
			[Bindable]
		    private var listtree:XML;
		    private var selectedNode:XML;
		    private var catalogsid:String;
		    private function httpResult(event:ResultEvent):void
		    {
		        listtree= event.result as XML;
		    }
		    
		    //点击树触发事件：1、右侧显示当前目录人员权限情况。2、可能要找出下级目录
		    private function treeChange(e:Event):void{
		    	selectedNode = Tree(e.target).selectedItem as XML;
		    	catalogsid = selectedNode.attribute("id");
		    	CustomEvent.dispatcher.dispatchEvent(new CustomEvent(EventNames.CATALOGROW,catalogsid));
		    }
		    
		    //点击树项目取到其下一级子目录
		    private function initEvent():void{
				CustomEvent.dispatcher.addEventListener(EventNames.CATALOGROW,gettree);
			}
		    
		    private function gettree(e:CustomEvent):void{
				catalogsid = e.data as String;
				remotetree.getTree(catalogsid);
			}
		    
		    private function getResult(e:ResultEvent):void{
		    	//得到后台返回的XML字符串
                var str:String = e.result as String;
		    	if(str!=null&&str!=""){
		    		var child:XML = new XML(str);
		    	/**
		    	 * 没点击过的需要appendChild，否则不需要。不然每点一次都会增加子目录
		    	 * ??????????????碰到的问题：selectedNode.appendChild(child)增加的时候本级目录下面会多出一级（跟本级目录一样）！！！
		    	 * ??????????????因为后台返回的是一个符合XML对象的字符串，一定要包含根节点（就是本级目录），要想办法把这个本级目录去掉或者不显示
		    	 * >>>>>>>>>>>>>>解决的办法：将返回的XML对象加在本级目录的父级目录上，再把本级目录删掉就OK了
		    	 * 名词解释：本级目录-->点击的目录，目录-->节点
		    	 */
			    	if(selectedNode.children()==null||selectedNode.children().length()==0){
			    		//点击不是root目录的目录
			    		if(selectedNode.parent()!=null){
			    			/**
			    			 * 在本级目录的上级添加后台返回的数据，此时效果相当于本级目录的同级增加了一个目录(后台返回的数据)
			    			 * addChildAt参数说明：
			    			 * 1、要增加子目录的位置，即子目录放在哪个目录下面	类型：Object
			    			 * 2、要增加的子目录	类型：XML
			    			 * 3、增加的子目录在父目录中的位置索引		类型：int
			    			 * 4、包含此节点的整个集合  		类型：Object
			    			 */
			    			mytree.dataDescriptor.addChildAt(selectedNode.parent(),child,selectedNode.childIndex(),null);
			    			//把点击的目录删掉
			    			delete selectedNode.parent().children()[selectedNode.childIndex()];
			    		}else{
			    			//点击root目录，直接appendChild然后不显示root就达到我们想要的效果了
			    			selectedNode.appendChild(child);
			    			mytree.showRoot = false;
			    		}
			    	}
		    	}
            }
		    
		    //树上显示其有几个子目录
		    private function tree_labelFunc(item:XML):String { 
                var children:ICollectionView; 
                var suffix:String = ""; 
                if (mytree.dataDescriptor.isBranch(item)) { 
                    children = mytree.dataDescriptor.getChildren(item); 
                    suffix = " (" + children.length + ")"; 
                } 
                return item[mytree.labelField] + suffix; 
            }
            
		]]>
	</mx:Script>
	<mx:RemoteObject id="remotetree" destination="Tree" result="getResult(event)"/>
	<mx:Canvas dropShadowEnabled="false" width="100%" height="100%">
		<mx:Tree id="mytree" width="100%" height="100%" 
					dataProvider="{listtree}" 
					change="treeChange(event)"
				    labelField="@label"
				    labelFunction="tree_labelFunc"
				    folderClosedIcon="@Embed('assets/image/foldericon.gif')"
				    folderOpenIcon="@Embed('assets/image/openfoldericon.gif')"
				    defaultLeafIcon="@Embed('assets/image/foldericon.gif')"/> 
	</mx:Canvas>
	
</mx:Canvas>

初始化的时候通过HTTPService去读tree.xml文件
tree.xml文件内容很简单：

<?xml version="1.0" encoding="UTF-8"?>
<node label="$/" id="000"></node>

这样初始化时就会显示一个只有一个目录的树。接下来看initEvent(),这个方法是为了增加自定义事件的监听，当用户点击不同的目录时（这里是treeChange(e:Event)方法）分发该自定义事件，被监听到以后转入gettree(e:CustomEvent)，此方法就是通过远程对象调java方法返回一个字符串（适合创建XML对象的字符串），执行完后进入getResult(e:ResultEvent)方法，动态树的关键处理就在这个方法里面，具体说明代码中注释写的比较清楚。
如果自定义事件还不是很清楚，可以去看我另一篇关于flex自定义事件的说明。

这样功能上时实现了，不过我觉得应该会有更好的方法，希望大家一起研究，一起进步。
接下来要做的事：datagrid中checkbox处理，树中checkbox处理，有兴趣的朋友一起研究啊:）

评论

5 楼 liuchuxiong2003 2012-08-23  

点击左边没有三角按钮的时候 事件为什么触发不了呢？

4 楼 tobeno1 2011-10-13  

var child:XML = new XML("ddd");
appendChild(child).

多谢了。。。

3 楼 sai0227 2011-06-29  

请问，这个是从数据库读数据，在FLEX端生成动态树吗？

2 楼 Vimesly 2011-01-19  

朋友在线没 有几个问题请假下

1 楼 01jiangwei01 2010-08-04  

照着都部署不上，把源码传上来也许会好一点。