注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

风之泪

风过雨过,花开花落。。。

 
 
 

日志

 
 

Flex 基于数据源的Menu Tree  

2011-03-22 14:56:25|  分类: flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
实现功能:

    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 - 风 - 风之泪

 源码下载

转载自http://java.chinaitlab.com/others/783646.html

  评论这张
 
阅读(281)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017