Flex 基于数据源的Menu Tree实现代码

所属分类: 网络编程 / Flex 阅读数: 944
收藏 0 赞 0 分享
实现功能:
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>

更多精彩内容其他人还在看

flex4.0 利用外部项呈示器显示List信息并添加图片示例

利用外部项呈示器显示List信息并添加图片,在本文有个不错的示例,喜欢的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

Flex实现双轴组合图的设计思路及代码

组合图是有柱状图和折线图组合的,柱状图显示的数据是依据左边的竖直轴,折线图的数据依据右边的竖直轴,详细实现请看本文,希望对大家有所帮助
收藏 0 赞 0 分享

flex实现股票行情走势图示例代码

股票行情走势图在flex中也可以实现了,具体步骤及代码如下,感兴趣的朋友可以参考下,或许有所帮助
收藏 0 赞 0 分享

flex实现DataGrid高亮显示数据功能的解决方案

原生的DataGrid根本无法达到所要的效果,目前一般就是来改写原生的DataGrid,只需重新写一个类来重写drawRowBackground方法就可以了
收藏 0 赞 0 分享

Flex中如何动态生成DataGrid以及动态生成表头

因某些需要,DataGrid及其表头需要动态生成,网上的解决方案打多笼统,下面有个不错的解决方法,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

Flex中的HDividedBox和VDividedBox的比较附图

学习Flex的朋友对HDividedBox和VDividedBox并不陌生吧,下面是两者的简单比较,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

Flex中AdvancedDataGrid的用法示例介绍

AdvancedDataGrid实现双表头表格,在某些情况下还是比较实用的,下面有个不错的示例,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

FLEX给页面添加滚动条实现思路及代码

给页面添加滚动条的方法有很多,使用js获取浏览器窗口的宽高,根据浏览器窗口宽高修改样式,让滚动条出现,具体的实现如下,需要的朋友可以参考下
收藏 0 赞 0 分享

flex不显示GIF图片问题的另类解决方法

flex不显示GIF图片问题确实令人很头痛,不过我们可以用一些手段让其乖乖显示出来,具体的实现如下,需要的朋友可以参考下
收藏 0 赞 0 分享

flex中使用RadioButtonGroup时取出所选项的值的方法

flex中的RadioButtonGroup想必大家并不陌生吧,在本文将为大家介绍下在使用RadioButtonGroup时如何取出所选项的值,感兴趣的朋友可以参考下
收藏 0 赞 0 分享
查看更多