flex tree 动态加载以及自动展开

最新推荐文章于 2014-01-24 11:36:08 发布

原创最新推荐文章于 2014-01-24 11:36:08 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用Flex技术实现的树形结构组件。该组件能够动态加载子节点，并通过Ajax从后端获取数据。前端部分利用Flex的WebServiceReuqest进行数据请求，并通过XML处理数据结构。后端则负责组织数据并返回XML格式的数据供前端展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先主要是百度的前辈的资源，自己修改了一部分，可是还是有自己的努力成果，希望可以帮助一下大家
首先是flex的代码

/**
		 * 获取子级
		 **/
		public function getDeptChildrenDept(n_jgdh:String):void{
			_request = new WebServiceReuqest(_serviceUrl);
			_request.resultHandle = handleTheReslut;
			_request.data = n_jgdh;
			_request.request("getTree",n_jgdh,_deptType);
		}
	/**
		 * 获取机构返回的数据处理函数
		 * */
		private function handleTheReslut(data:Object,jgdh:String = null):void{
			var str:String = data as String; 
			if(str!=null&&str!=""){
				var child:XML = new XML(str); 
				if(selectedNode.children()==null||selectedNode.children().length()==0){ //判断是不是已经有子级了
					if(selectedNode.parent()!=null){ 
						mytree.dataDescriptor.addChildAt(selectedNode.parent(),child,selectedNode.childIndex(),null); //把这个机构加到树上去
						delete selectedNode.parent().children()[selectedNode.childIndex()];//删除已有的那个结点
						mytree.expandItem(child, true);//展开，这个child就是新加的那个结点，因为之前结点已经删除
					}else{ 
						selectedNode.appendChild(child);
						mytree.showRoot = true;
					} 
				} 
			} 
		}

<fx:Script>
		<![CDATA[
			import com.depth.viewer.facade.IocAppFacade;
			
			import mx.collections.ICollectionView;
			//树上显示其有几个子目录 
			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;  
			}
			//树的点击事件
			private function treeChange(e:Event):void{ 
				hostComponent.selectedNode = Tree(e.target).selectedItem as XML; 
				var id:String  = hostComponent.selectedNode.attribute("id");
				hostComponent.setMapCenterPoint(id);
				if(hostComponent.selectedNode.children()==null||
					hostComponent.selectedNode.children().length()==0){ 
					hostComponent.getDeptChildrenDept(id);
				}
				IocAppFacade.sendNotification(ConstFacade.LOAD_BUSINESS_AREA_LIST,id);
            } 
		]]>
	</fx:Script>
	<mx:Canvas  width="100%" height="100%">  
		<mx:Tree id="mytree" width="100%" height="100%"   
				 dataProvider="{hostComponent.listtree}"   
				 labelField="@label"  
				 showRoot="true"
				 labelFunction="tree_labelFunc"
				 change="treeChange(event)"
				 folderClosedIcon="@Embed('assets/yz-icons/legend/open.png')"  
				 folderOpenIcon="@Embed('assets/yz-icons/legend/close.png')"  
				 defaultLeafIcon="@Embed('assets/yz-icons/legend/default.png')"/>   
	</mx:Canvas>

接着是后台的代码就很简单的

HttpServletRequest request = XFireServletController.getRequest();
        HttpSession session = request.getSession(true);
		List<Map<String,String>> list = common.getDeptChild(n_jgdh, session);
		OrganManage organManage = new OrganManage();
		Organ organ = organManage.getOrgan(Integer.valueOf(n_jgdh), session);
		String startnode = "<node type=\""+organ.getN_jglx()+"\" label=\""+organ.getC_jgmc()+"\" id=\""+organ.getN_jgdh()+"\">";  
	    String endnode = "</node>"; 
	    StringBuilder result = new StringBuilder();
	    result.append(startnode);
	    for(int i = 0;i<list.size();i++){
	    	if(getIsput(list.get(i).get("type"),type)){continue;}
	    	String temp = "<node type=\""+list.get(i).get("type")+"\" label=\""
	    				+list.get(i).get("name")+"\" id=\""+list.get(i).get("id")+"\"></node>";
	    	 result.append(temp);
	    }
	    result.append(endnode);
		return result.toString();

这个树自己写了好几天，虽然不是很难，但对于我，已经是一个成果了，其实只要努力的找，网上还是有答案的