Flex动态生成Tree

最新推荐文章于 2020-07-10 13:28:56 发布

啊噗.

最新推荐文章于 2020-07-10 13:28:56 发布

阅读量242

点赞数

CC 4.0 BY-SA版权

分类专栏： flex 文章标签： flex tree

本文链接：https://blog.youkuaiyun.com/qq_39627299/article/details/86232461

flex 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用Java后端直接生成树形结构数据，并在Flex前端动态展示的方法。通过定义VO类封装数据库查询结果，利用SQL查询获取不同层级的数据，最终在Flex页面上构建出Tree控件。文章详细展示了从后端数据准备到前端页面展示的全过程。

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

Flex动态生成Tree

我在网上看见的大多数是根据xml来调用的tree,对于我们这样刚刚接触flex的不需要再去翻java后台转xml的方法了。java后台直接生成tree来调用。结合网上的资料，我进行了一下修改和整合，在这里总结一下。
java代码块
使用VO来封装数据库的数据，其中需要有一个类型为List的children属性，由于Tree控件不像DataGrid，List控件，它拥有层次结构。


package model;

import java.util.List;

import org.nutz.dao.entity.annotation.Column;
import org.nutz.dao.entity.annotation.Name;
import org.nutz.dao.entity.annotation.Table;


@Table("t_sd_equipment")
public class T_SD_EQUIPMENT {
	
	
	@Column
	private String id;
	@Column
	private String name;
	@Column
	private String type;
	
	public T_SD_EQUIPMENT(String id, String name, String type) {
		// TODO Auto-generated constructor stub
		super();  
		this.id = id;  
		this.name = name;  
		this.type = type;  
	}
	//注意必须加上这个 不然保存的时候会有问题
	public T_SD_EQUIPMENT() {
		// TODO Auto-generated constructor stub
	}

	
	public String getType() {
		return type;
	}

	public void setType(String type) {
		this.type = type;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	private List<T_SD_EQUIPMENT> children;

	public List<T_SD_EQUIPMENT> getChildren() {
		return children;
	}

	public void setChildren(List<T_SD_EQUIPMENT> children) {
		this.children = children;
	}
		
	

}

实现业务层的操作

//tree
//实现第一层文件夹的代码sql语句查询你需要的表数据
		public List<T_SD_EQUIPMENT> getTreeList() {
			List<T_SD_EQUIPMENT> retList = new ArrayList<>();
			if (dao == null) {
				DaoUtils.startup();
			}
			Sql sql = Sqls
					.create("SELECT e.`LINE` AS NAME ,e.`OBJ_ID` AS id ,e.`E_TYPE` AS TYPE FROM `t_sd_equipment` e WHERE  e.`E_TYPE`='配电室' AND e.`STATION`IS NOT NULL");
			sql.setEntity(dao.getEntity(NutMap.class));
			sql.setCallback(Sqls.callback.maps());
			dao.execute(sql);
			List<NutMap> list = sql.getList(NutMap.class);
			NutMap m = new NutMap();
			try {
				for (NutMap nut : list){
					T_SD_EQUIPMENT spec = new T_SD_EQUIPMENT(nut.getString("id"), nut.getString("NAME"), "devmaintype");   
					spec.setChildren(new ArrayList<T_SD_EQUIPMENT>());  
					retList.add(spec); 
				}
			} catch (Exception e) {
				// TODO: handle exception
				e.printStackTrace();  
			}
			return retList;
		}
		
//实现第二层文件夹的代码sql语句查询你需要的表数据
		public List<T_SD_EQUIPMENT> getSpecListByDevMainTypeID(String id) {
			List<T_SD_EQUIPMENT> retList = new ArrayList<>();
			if (dao == null) {
				DaoUtils.startup();
			}
			Sql sql = Sqls
					.create("SELECT e.`STATION` AS NAME ,e.`OBJ_ID` AS id ,e.`E_TYPE` AS TYPE FROM `t_sd_equipment` e WHERE  e.`OBJ_ID`='"+id+"' AND e.`STATION`IS NOT NULL");
			sql.setEntity(dao.getEntity(NutMap.class));
			sql.setCallback(Sqls.callback.maps());
			dao.execute(sql);
			List<NutMap> list = sql.getList(NutMap.class);
			try {
				for (NutMap nut : list){
					T_SD_EQUIPMENT spec = new T_SD_EQUIPMENT(nut.getString("id"), nut.getString("NAME"), "spec");   
					spec.setChildren(new ArrayList<T_SD_EQUIPMENT>());  
					retList.add(spec); 
				}
			} catch (Exception e) {
				// TODO: handle exception
				e.printStackTrace();  
			}
			
			return retList;
		}
		
//实现第三层文件夹的代码sql语句查询你需要的表数据	
		public List<T_SD_EQUIPMENT> getPropListBySpecID(String id) {
			List<T_SD_EQUIPMENT> retList = new ArrayList<>();
			if (dao == null) {
				DaoUtils.startup();
			}
			Sql sql = Sqls
					.create("SELECT  DISTINCT  e.`E_TYPE` AS TYPE,e.`F_ID` AS fid   FROM `t_sd_equipment` e WHERE  e.`F_ID`='"+id+"' AND e.`STATION`IS NOT NULL");
			sql.setEntity(dao.getEntity(NutMap.class));
			sql.setCallback(Sqls.callback.maps());
			dao.execute(sql);
			List<NutMap> list = sql.getList(NutMap.class);
			try {
				for (NutMap nut : list){
					T_SD_EQUIPMENT spec = new T_SD_EQUIPMENT(nut.getString("fid"), nut.getString("TYPE"), "prop");   
					spec.setChildren(new ArrayList<T_SD_EQUIPMENT>());  
					retList.add(spec); 
				}
			} catch (Exception e) {
				// TODO: handle exception
				e.printStackTrace();  
			}
			return retList;
		}
		

//实现tree文本的内容
		public List<T_SD_EQUIPMENT> getPropListBySpecIDTwo(String id,String type) {
			List<T_SD_EQUIPMENT> retList = new ArrayList<>();
			if (dao == null) {
				DaoUtils.startup();
			}
			Sql sql = Sqls
					.create("SELECT  e.`E_NAME` AS NAME,e.`OBJ_ID` AS id ,e.`E_TYPE` AS TYPE   FROM `t_sd_equipment` e WHERE  e.`F_ID`='"+id+"' AND  e.`E_TYPE`='"+type+"' AND e.`STATION`IS NOT NULL");
			sql.setEntity(dao.getEntity(NutMap.class));
			sql.setCallback(Sqls.callback.maps());
			dao.execute(sql);
			List<NutMap> list = sql.getList(NutMap.class);
			try {
				for (NutMap nut : list){
					T_SD_EQUIPMENT spec = new T_SD_EQUIPMENT(nut.getString("id"), nut.getString("NAME"), "proptwo");   
//这个需要注掉不然会显示文件夹 注掉才能显示文本
//					spec.setChildren(new ArrayList<T_SD_EQUIPMENT>());  
					retList.add(spec); 
				}
			} catch (Exception e) {
				// TODO: handle exception
				e.printStackTrace();  
			}
			return retList;
		}

flex页面代码
首先在Flex中构建一个与Java端实体类对象相映射的VO类——TreeNodeVO。

package components.ZTJC.Components.vo
{
	import mx.collections.ArrayCollection;

	[Bindable]
	[RemoteClass(alias="model.T_SD_EQUIPMENT")]  
	public class TreeNodeVO
	{
		
		public var id:String;
		public var name:String;
		public var type:String;
		public var posx:String;
		
		
		public var children:ArrayCollection;
		
		public function TreeNodeVO()
		{
		}
	}
}

接下来就是MXML文件

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="400" title="电网资源选择"  creationComplete="titlewindow1_creationCompleteHandler(event)" close="titlewindow1_closeHandler(event)">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<s:RemoteObject id="du" destination="DaoUtils"
endpoint="http://localhost:8080/" fault="du_faultHandler(event)">
			<s:method name="getTreeList" result="query_getTreeList_resultHandler(event)"/>
			<s:method name="getSpecListByDevMainTypeID" result="getSpecListByDevMainTypeID_resultHandler(event)"/>
			<s:method name="getPropListBySpecID" result="getPropListBySpecID_resultHandler(event)"/>
			<s:method name="getPropListBySpecIDTwo" result="getPropListBySpecIDTwo_resultHandler(event)"/>
			
		</s:RemoteObject>

	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.CloseEvent;
			import mx.events.FlexEvent;
			import mx.events.TreeEvent;
			import mx.managers.PopUpManager;
			import mx.managers.SystemManager;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			import components.ZTJC.Components.SensorAddTabA;
			import components.ZTJC.Components.vo.TreeNodeVO;
			import components.ZTJC.Components.vo.TreeVo;
			import components.ZTJC.Views.TwAddSensor;
			
			[Bindable] 
			[ArrayElementType("components.ZTJC.Components.vo.TreeNodeVO")]
			public var firstData:ArrayCollection=new ArrayCollection();
			
			[Bindable] 
//			private var selectedNode:TreeNodeVO; 
			
			private var selectedNode:Object; 
			
			protected function du_faultHandler(event:FaultEvent):void
			{
				// TODO Auto-generated method stub
				Alert.show(event.fault.message); 
			}
			
			protected function query_getTreeList_resultHandler(event:ResultEvent):void {
				firstData = event.result as ArrayCollection;
			}
			
			protected function getSpecListByDevMainTypeID_resultHandler(event:ResultEvent):void 
			{ 
				selectedNode.children=event.result as ArrayCollection; 
				firstData.itemUpdated(selectedNode); 
			} 
			
			protected function getPropListBySpecID_resultHandler(event:ResultEvent):void 
			{ 
				selectedNode.children=event.result as ArrayCollection; 
				firstData.itemUpdated(selectedNode); 
			} 
			
			protected function getPropListBySpecIDTwo_resultHandler(event:ResultEvent):void 
			{ 
				selectedNode.children=event.result as ArrayCollection; 
				firstData.itemUpdated(selectedNode); 
			} 
			
			protected function specTree_itemOpeningHandler(event:TreeEvent):void
			{
//				selectedNode=event.item as TreeNodeVO;
				selectedNode=event.item;
				if(!equipTree.isItemOpen(event.item)&&event.item.children.length==0)
				{
					if(selectedNode.type=="devmaintype")
						du.getSpecListByDevMainTypeID(event.item.id);
						
					else if(selectedNode.type=="spec")
						du.getPropListBySpecID(event.item.id);
						
					else if(selectedNode.type=="prop")
						du.getPropListBySpecIDTwo(event.item.id,event.item.name);
				}
							}

			protected function titlewindow1_creationCompleteHandler(event:FlexEvent):void
			{
				
				du.getTreeList();
				
			}			
						
					
						
			protected function titlewindow1_closeHandler(event:CloseEvent):void
			{
				// TODO Auto-generated method stub
				PopUpManager.removePopUp(this);
			}
			
		]]>
	</fx:Script>
	<mx:Tree id="equipTree" width="100%" height="100%" dataProvider="{firstData}" labelField="name"
			 itemOpening="specTree_itemOpeningHandler(event)" 
			  visible="true" showRoot="true" > 
			
	</mx:Tree>
	
		
</s:TitleWindow>