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>