實現功能:
1.由外部參數flashvars指定數據源的文件位置或render鏈接.
2.在源數據上加href和target屬性來控制打開窗口.
3.可自定義父節點和子節點圖標,不設置採用系統默認.
直接上源碼:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontFamily="simsun" fontSize="12" layout="absolute" creationComplete="menu.send();" width="242" height="442" initialize="init()"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.events.ListEvent; import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; [Bindable] private var strUrl:String = "TreeMenus.xml"; [Bindable] private var menus:XML; [Bindable] [Embed("open.gif")] public var openicon:Class; [Bindable] [Embed("close.gif")] public var closeicon:Class; [Bindable] [Embed("leaf.gif")] public var leaficon:Class; private function init():void { this.strUrl = this.parameters.url; } private function LoadMenu(event:ResultEvent):void { menus = XML(event.result); var results:XMLList = menus.node; tree1.dataProvider = results; } //菜單圖標設置 private function treeIcon(item:Object):Class { var node:XML = XML(item); trace('icon:' node.@icon); var str : String = node.@icon; //已經設置圖標 if(node.hasOwnProperty("@icon")) { if(node.@icon == 'openicon') { return openicon; } if(node.@icon == 'closeicon') { return closeicon; } if(node.@icon == 'leaficon') { return leaficon; } } else { //如果沒定義icon就直接用默認的 if(!tree1.dataDescriptor.isBranch(item)) { return tree1.getStyle("defaultLeafIcon"); } if(tree1.isItemOpen(item)) { return tree1.getStyle("folderOpenIcon"); } else { return tree1.getStyle("folderClosedIcon"); } } return null; } /** *//** * 菜單樹單項點擊事件 * */ private function itemClickHandler(evt:ListEvent):void { var item:Object = Tree(evt.currentTarget).selectedItem; if (tree1.dataDescriptor.isBranch(item)) { //tree1.expandItem(item, !groupTree.isItemOpen(item), true); } else { //得到節點對象 var node:XML = XML(item); //如果有屬性href if(node.hasOwnProperty("@href") && node.hasOwnProperty("@target")) { openURL(node.@href,node.@target); } if(node.hasOwnProperty("@href") && (node.hasOwnProperty("@target") == false)) { //沒有指定target默認在新窗口中打開 openURL(node.@href,"_blank"); } } } //頁面跳轉的方法 private function openURL(url:String ,target:String):void { var request:URLRequest = new URLRequest(url); navigateToURL(request,target); } ]]> </mx:Script> <mx:HTTPService url="{strUrl}" id="menu" useProxy="false" showBusyCursor="true" result="LoadMenu(event)" resultFormat="xml"/> <mx:Tree iconFunction="treeIcon" id="tree1" width="100%" height="100%" labelField="@label" itemClick="itemClickHandler(event)"/> </mx:Application> |
調用的時候在flashvars裡面加上url=xxx
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="tree" width="242" height="442" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> <param name="movie" value="${ctx}/js/as/menu.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#869ca7" /> <param name="allowScriptAccess" value="sameDomain" /> <!-- 指定菜單的數據源 --> <param name="flashvars" value="url=${ctx}/user/user!renderMenu.do?id=${user.usid}" /> <embed src="tree.swf" quality="high" bgcolor="#869ca7" width="242" height="442" name="tree" align="middle" play="true" loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"> </embed> </object> |
其中url可以指定xml文件的位置或者render的鏈接
示例文件xml:
<?xml version='1.0' encoding='utf-8'?> <menus> <node label='系統管理' icon="openicon"> <node label='用戶管理' icon="closeicon" href='/main/user/user-list.jsp' target='mainFrame' /> <node label='許可權管理' href='/main/user/action-list.jsp' target='mainFrame' /> <node label='角色管理' href='/main/user/role-list.jsp' target='mainFrame' /> <node label='域管理' href='/main/user/user-list.jsp' target='mainFrame' /> <node label='測試'> <node label='sub folder' href='' target='mainFrame' /> </node> </node> <node label='客服'> <node label='終端信息查詢' href='' target='mainFrame' /> <node label='客服問題-解答記錄' href='' target='mainFrame' /> </node> </menus> |
源碼下載:點擊
[火星人 ] Flex 基於數據源的Menu Tree已經有352次圍觀