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><! 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.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); } //--------------------------------------右键菜单----------------------------------------------------- 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的函数------------------------------------------------ public var isCanInsert:Boolean=true; public var isCanRename:Boolean=true; 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.name().toString()]=atts.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.name().toString()]=atts.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><! 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
页:
[1]