Flex通用树结构

无忧鱼

最近公司做前台页面，需要做一个树形结构，本来是找了一个用jQuery做得，可是好像有一些bug，这个组的人jQuery也都比较菜，所以就用Flex做了一个树结构，网上也参考了一下资料，反正最后做出来的东西还算能用吧，呵呵。

这个是主程序文件，实现了右键菜单的  添加 删除 重命名的功能。本来准备找下资料隐藏掉Flex自带的右键菜单项的，好像是要使用第三方的包吧，因为开发的时间不是很够，所以就暂时没有实现了。

因为是做为一个通用结构嵌到页面中去的，所以Flex和JS相互交互，相互调用对方函数的比较多。
<!--  主程序文件  FlexTreeTest2.mxml--><?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    layout="vertical"    fontSize="12" creationComplete="initTree();returnNowTimeXML();returnSelectedItemValue();hideRightClickMenu();" backgroundColor="white"> <mx:Script>  <![CDATA[   import mx.messaging.management.ObjectInstance;   import mx.controls.Alert;   import flash.ui.ContextMenu;   import mx.controls.Alert;   import mx.collections.XMLListCollection;   import mx.events.*;   import mx.managers.PopUpManager;   import flash.external.*;flash.system.Security.allowDomain("*");   [Bindable]   private var company:XML=<root name="梦网科技——通用树结构">     <list name="研发一部">      <node name="A" />      <node name="B" />     </list>     <list name="移动信息化研发中心">      <node name="C" />      <node name="D" />     </list>     <node name="测试部门"/>    </root>;   //新增节点      private function addNode():void   {    var pop : PopWindow= PopWindow(PopUpManager.createPopUp(this,PopWindow,true));    PopUpManager.centerPopUp(pop);    pop.callBackFunction=callBack_addNode;   }      private function callBack_addNode(str:String):void{   var newNode:XML=<employee/>;    newNode.@name=str;    newNode.@id=-1;    var xml:XML=XML(tree.selectedItem);    if (xml.length() > 0)    {     xml[0].appendChild(newNode);    }    ExternalInterface.call("addNewNode",tree.selectedItem.@id,str);   }   //删除节点   private function removeNode():void   {    if (tree.selectedItem != null)    {     var node:XML=XML(tree.selectedItem);     var oldSelectedNode:Object=tree.selectedItem;     // 不能删除空节点和部门A，B     if (node == null)     {      Alert.show("不能删除空节点");      return;     }     // 获取当前节点的父节点下的所有子节点     var children:XMLList=XMLList(node.parent()).children();     // 将其转换为 XMLListCollection     var childrenCol:XMLListCollection=new XMLListCollection(children);     // 获取选中节点索引，并删除该节点     var i:Number=childrenCol.getItemIndex(node);     if(i==-1){     Alert.show('不能删除根节点');     return;     }     childrenCol.removeItemAt(i);     ExternalInterface.call("deleteNode",oldSelectedNode.@id)    }else{     Alert.show("请选中一个节点再进行删除！");    }   }               //重命名节点   private function renameNode():void{   var pop : PopWindow= PopWindow(PopUpManager.createPopUp(this,PopWindow,true));    PopUpManager.centerPopUp(pop);    pop.callBackFunction=callBack_renameNode;   }   private function callBack_renameNode(str:String):void{   tree.selectedItem.@name=str;   ExternalInterface.call('renameNode',tree.selectedItem.@id,str);   }     //--------------------------------------右键菜单-----------------------------------------------------        [Bindable]   private var cm:ContextMenu;   private var alert:Alert;   private function init():void {   var cmi1:ContextMenuItem=null;   var cmi2:ContextMenuItem=null;   var cmi3:ContextMenuItem=null;   if(isCanInsert==true){   cmi1 = new ContextMenuItem("新建节点", true);   cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_addNewNode);   }   if(isCanDelete==true){   cmi2=new ContextMenuItem("删除节点",true);   cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,contextMenuItem_deleteNode);   }   if(isCanRename==true){    cmi3=new ContextMenuItem("重命名节点",true);     cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,contextMenuItem_renameNode);    }    cm = new ContextMenu();    cm.hideBuiltInItems();    var arrMenu:Array = new Array();    if(cmi1!=null){arrMenu.push(cmi1);}    if(cmi2!=null){arrMenu.push(cmi2);}    if(cmi3!=null){arrMenu.push(cmi3);}    cm.customItems = arrMenu;    cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);   }   private function contextMenu_menuSelect(evt:ContextMenuEvent):void {         tree.selectedIndex = lastRollOverIndex;   }  /*   private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void {        var obj:Object = tree.selectedItem;        alert = Alert.show("Property: " + obj.@name);   }   */      private function contextMenuItem_addNewNode(evt:ContextMenuEvent):void{   addNode();   }   private function contextMenuItem_deleteNode(evt:ContextMenuEvent):void{   Alert.show("确认要删除吗？","删除提示",Alert.YES|Alert.NO,null,function(event:CloseEvent){   if(event.detail==Alert.YES){   removeNode();   return;   }  else if(event.detail==Alert.NO){return; }    })   }   private function contextMenuItem_renameNode(evt:ContextMenuEvent):void{   //to-do   renameNode();   }       //----------------------------------js调用flex的函数------------------------------------------------   [Bindable]   public var isCanInsert:Boolean=true;   [Bindable]   public var isCanRename:Boolean=true;   [Bindable]   public var isCanDelete:Boolean=true;   public function init_tree(xmlStr:String,title:String,canInsert:Boolean,canDelete:Boolean,canRename:Boolean):void{   mx.controls.Alert.show(xmlStr);   company=new XML(xmlStr);   panel1.title=title;   isCanInsert=canInsert;   isCanDelete=canDelete;   isCanRename=canRename;   init();   }   //javascript调用的初始化树结构的函数   public function initTree():void{   ExternalInterface.addCallback("initFlexTree",init_tree);   }      //javascript调用的得到树结构的函数   public function nowTimeXML():String{   return company.toString();   }   public function returnNowTimeXML():void{   ExternalInterface.addCallback("getNowTimeXML",nowTimeXML);   }      //javascript调用返回当前选中项的属性值   public function selectedItemValue(str:String):String{   return (tree.selectedItem as XML).attribute(str).toString();   }   public function returnSelectedItemValue():void{   ExternalInterface.addCallback("nowtimeSelectedItemValues",selectedItemValue);   }      public function treeDoubleClick(event:ListEvent):void{   var temp:String='name';   var node:XML=tree.selectedItem as XML;  var atts:XMLList=node.@*;  var returnObject:Object=new Object();  for(var i:int=0;i<atts.length();i++){  returnObject[atts[i].name().toString()]=atts[i].valueOf().toString();  }   ExternalInterface.call('doubleClick_Tree',returnObject);      }   public function treeClick(event:ListEvent):void{   var node:XML=tree.selectedItem as XML;  var atts:XMLList=node.@*;  var returnObject:Object=new Object();  for(var i:int=0;i<atts.length();i++){  returnObject[atts[i].name().toString()]=atts[i].valueOf().toString();  }   ExternalInterface.call('click_tree',returnObject);   }  ]]> </mx:Script> <mx:Number id="lastRollOverIndex" /> <mx:Panel     width="260"     height="300"     id="panel1" backgroundColor="white">  <mx:Tree id="tree" contextMenu="{cm}"   itemRollOver="lastRollOverIndex = event.rowIndex"     dataProvider="{company}"     labelField="@name"     height="220"     width="230"      doubleClickEnabled='true'     itemDoubleClick="treeDoubleClick(event)" itemClick="treeClick(event)"/>  <mx:HBox>   <mx:Button label="添加节点"        click="addNode();" visible="{isCanInsert}"/>   <mx:Button label="删除节点"        click="removeNode();" id="myButton" visible="{isCanDelete}"/>   <mx:Button id="newNode"        click="renameNode()" label="重命名" visible="{isCanRename}"/>  </mx:HBox> </mx:Panel></mx:Application>




后面的这个文件主要是弹出框的，类似于网页中的遮罩层，当然在flex中实现起来就非常简单了，为了这个程序的完整性，我还是把相应的代码放上来。

<!--  PopWindow.mxml  弹出框，重命名和新建的时候调用，输入新名称--><?xml version="1.0" encoding="utf-8"?><mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="176" height="106"><mx:Script><![CDATA[import mx.managers.PopUpManager;   [Bindable]   public var callBackFunction:Function;   public var pop:Object=null;   private function returnName():void {    //newName.text=input1.text;    callBackFunction.call(pop,input1.text);     PopUpManager.removePopUp(this);   }private function fun_cancel():void{PopUpManager.removePopUp(this);return;}]]></mx:Script><mx:VBox width="158" height="80" left="10" top="10"><mx:Text text="请输入节点名称:" fontSize="12"/><mx:TextInput text="" id="input1" width="144" fontSize="12"/><mx:HBox left='20' top="20"><mx:Button label="确定" click="returnName()" fontSize="12"/><mx:Button label="取消" click="fun_cancel()" fontSize="12"/></mx:HBox></mx:VBox></mx:Canvas>


最后写了一个JS的范例，因为写好的树是给别人用的嘛，所以这个JS里面注释比较多，我工作的这个组除了我也没有人用Flex，所以也没有给他们Flex的源代码，因为给了也不会有人看的。。

还是照样，贴上写得JS代码吧
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"id="Flex_TreeTest2" width="310" height="350"codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"><param name="movie" value="Flex_TreeTest2.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000" /><param name="allowScriptAccess" value ="always" /><embed src="Flex_TreeTest2.swf" quality="high" bgcolor="#000"width="100%" height="100%" name="Flex_TreeTest2" align="middle"play="true"loop="false"quality="high"allowScriptAccess="always"type="application/x-shockwave-flash"pluginspage="http://www.adobe.com/go/getflashplayer"></embed></object><button /><script language='javascript'>//初始化树结构，传入符合xml规范的字符串 name为需要显示的值 id为唯一标识符//xml 符合xml标准的字符串//title 标题//canInsert 是否可以插入新节点//canDelete 是否可以删除节点//canRename 是否可以重命名节点function initFlexTree(xml,title,canInsert,canDelete,canRename){Flex_TreeTest2.initFlexTree(xml,title,canInsert,canDelete,canRename);}//新建节点后需要调用的函数，例如写数据库等，在flex中会自动调用相关的此函数//其中pid为父节点的id值//name 为新建时输入的名称function addNewNode(pid,name){alert(pid);alert(name);}//删除节点后需要调用的函数，例如写数据库等，在flex中会自动调用此函数//id为删除节点的id值function deleteNode(id){alert(id);}//重命名节点后需要调用的函数，例如写数据库等，在flex中会自动调用此函数//id为重命名的id值//name为新名字function renameNode(id,name){alert(id);alert(name);}//得到树结构的xml格式文档function returnNowtimeXML(){return Flex_TreeTest2.getNowTimeXML();}//得到选中的项目的值,str为属性的名称，例如，str="name"则返回当前选中项name属性的值//如果当前项改属性的值不存在，则返回所有子节点的改属性的值，用分号隔开function getNowTimeSelectedItemValue(str){return Flex_TreeTest2.nowtimeSelectedItemValues(str);}//双击选择一项后调用，obj我会组装成Objectfunction doubleClick_Tree(obj){alert(obj.name);alert(obj.id);alert(getNowTimeSelectedItemValue('name'));}//单击后调用，obj为包装后的Object类型 例如，取出当前点击项的id:obj.id;function click_tree(obj){alert(obj.name);}</script>

附件里面就是这个树结构的swf文件了，其实挺简单的。

话说Adobe公司要放弃Flex，给Apache开源了。然后老大就告诉我，尽量少用Flex，唉。想想当初我刚编程还做Delphi开发呢，到现在还在做，当然主要精力还是在JAVA方面。明年开年估计还要用Delphi做个客户端软件。Delphi 早就走下坡路了，Flex也悲剧了。下一个希望不是java，js，css