`
zhanshenlvbu
  • 浏览: 110883 次
社区版块
存档分类
最新评论

Flex自定义Tree图标

    博客分类:
  • Flex
阅读更多

1.数据源为xml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
  <![CDATA[
   import mx.collections.XMLListCollection;
 
   [Embed(source="assets/max_over.gif")]          //这是图片的相对地址
         [Bindable]
         public var OKicon:Class;
        
         [Embed(source="assets/close_over.gif")]          //这是图片的相对地址
         [Bindable]
         public var NOicon:Class;
  
   //设置不同图表          
   private function iconFun(item:Object):*
   {
    var xml:XML     = item as XML;
   
    if(xml.attribute("bool") == true)
     return OKicon;
    else if(xml.attribute("bool") == false)
     return NOicon;
   } 
  ]]>
</mx:Script>

<mx:XMLListCollection id="datatree" >
  <mx:source>
            <mx:XMLList>
                <node label="NO1" bool="false">
                    <node label="NO11" bool="false">
                        <node label="NO111" bool="false"/>
                    </node>
                    <node label="NO22" bool="true"/>
                </node>
                <node label="NO2" bool="true">
                    <node label="NO11" bool="false">
                     <node label="NO111" bool="false"/>
                    </node>
                    <node label="NO22" bool="true">
                     <node label="NO222" bool="false"/>
                    </node>
                </node>
            </mx:XMLList>
  </mx:source>
</mx:XMLListCollection>

<mx:Tree id="tree" y="40" width="100%" height="100%" fontFamily="Arial" fontSize="12"
   dataProvider="{datatree}" labelField="@label" iconFunction="iconFun" />
</mx:Application> 

 

 

 

 

2.数据源为Object

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
  <![CDATA[
   import mx.collections.XMLListCollection;
 
        [Bindable]
        public var firstObj:TreeNode = new TreeNode();
        [Bindable]
        public var firstObj1:TreeNode = new TreeNode();
        [Bindable]
        public var firstObj2:TreeNode = new TreeNode();

        [Bindable]
        [Embed(source="assets/treeicon/SUBNETWORK.png")] 
        public var SUBNETWORK:Class; 

        [Bindable]
        [Embed(source="assets/treeicon/NAD.png")] 
        public var NAD:Class; 

        [Bindable]
        [Embed(source="assets/treeicon/CrossingServer.png")] 
        public var CrossingServer:Class; 

        [Bindable]
        [Embed(source="assets/treeicon/Camera.png")] 
        public var Camera:Class;   

        //设置不同图标          
     private function iconFun(item:Object):*
        {
                var tn:TreeNode     = item as TreeNode;
				
                if(tn.type == "NAD")
	        return NAD;
                else if(tn.type == "CrossingServer")
	        return CrossingServer;
                else if(tn.type == "Camera")
	        return Camera;
                else if(tn.type == "SUBNETWORK")
	        return SUBNETWORK;   
        } 
  ]]>
</mx:Script>

        <mx:Tree id="sourcesTree" x="0" top="0" width="100%" height="100%" dataProvider="{firstObj}" iconField="head" labelField="labels" showRoot="true" iconFunction="iconFun" >
</mx:Application> 

  

    TreeNode.as代码

package com.lsun.irms.nms.topo.vo
{

	public class TreeNode
	{
		private var _labels:String;
		private var _type:String;
		private var _head:Class;
		private var _children:Array;

		public function get children():Array
		{
			return _children;
		}

		public function set children(value:Array):void
		{
			_children = value;
		}

		public function get head():Class
		{
			return _head;
		}

		public function set head(value:Class):void
		{
			_head = value;
		}

		public function get type():String
		{
			return _type;
		}

		public function set type(value:String):void
		{
			_type = value;
		}

		public function get labels():String
		{
			return _labels;
		}

		public function set labels(value:String):void
		{
			_labels = value;
		}

	}
}

 

分享到:
评论

相关推荐

    flex树自定义节点图标

    本主题将深入探讨如何在Flex Tree中实现自定义节点图标,以及与之相关的源码分析。 1. **自定义节点图标的意义** - 节点图标可以增强用户对树结构的理解,通过图标直观地传达节点类型或状态信息。 - 图标可以是...

    flex自定义树形结构

    结合`Flex`与`Tree`,我们可以构建一个自定义的树形结构。以下是一些关键步骤和知识点: 1. **容器设置**:首先,我们需要一个容器来承载整个树形结构。这个容器应该应用`display: flex`样式,使其成为Flex容器,并...

    各种Flex自定义组件

    在标题“各种Flex自定义组件”中,我们可以推断这是一个包含多种定制Flex组件的资源集合。这些组件可能包括时间选择器、数据网格(datagrid)、树形视图(tree)和下拉组合框(combox)。每个组件都有其特定的用途和...

    flex tree 修改icon方法

    当我们需要自定义Tree中的节点图标时,可能会遇到如何根据数据源动态改变图标的问题。标题"flex tree 修改icon方法"正好指出了这一需求。在这个场景下,我们需要通过编程方式来实现对Tree节点图标的个性化设置。 ...

    flex tree控件

    这个“flex tree控件”主题主要关注如何自定义Tree控件的外观,特别是如何去掉默认的图标并添加线连接来增强视觉效果。下面我们将深入探讨Flex Tree控件的基本概念、自定义节点图标以及使用线条连接节点的方法。 1....

    Flex tree的用法

    综上所述,Flex Tree是展示层次数据的强大工具,通过灵活的数据绑定、自定义渲染和丰富的交互特性,可以满足各种复杂的应用场景。在实际开发中,结合XML数据源,可以轻松构建出动态、交互性强的树状视图。通过学习和...

    flex tree icon

    在IT行业中,"flex tree icon"通常指的是使用Flex技术构建的一种树形结构控件,它在用户界面上显示带有图标的层次数据。Flex是一种用于创建富互联网应用程序(RIA)的框架,基于ActionScript编程语言和Flash Player...

    flex4Tree组件分层显示数据示例

    总之,这个“flex4Tree组件分层显示数据示例”将演示如何在Flex4环境中创建一个功能完善的Tree组件,包括数据绑定、自定义渲染器、事件处理和优化性能的方法。通过深入研究这个示例,开发者可以更好地理解和掌握在...

    flex 异步加载tree

    AsyncTree是Flex中的一个自定义组件,它允许开发者构建能够异步加载数据的树形结构。这通常用于展示大量数据或者需要动态加载子节点的情况。通过这种方式,可以显著提高应用的性能和用户体验。 ### 二、代码解析 #...

    Flex 下拉框为Tree的ComboBox

    在Flex中,我们可以自定义ComboBox的dropdown属性,将默认的List替换为Tree。Tree组件可以很好地呈现层次结构,每个节点可以有子节点,并且可以通过展开和折叠来控制显示的内容。我们需要创建一个新的类,继承自...

    flex tree的简单使用

    在实际应用中,我们可能会遇到更复杂的需求,比如异步加载数据、自定义节点图标、拖放功能等。对于这些高级特性,我们需要深入理解Flex的事件模型和数据绑定机制。 在MXML中创建Tree的基本语法如下: ```xml &lt;Tree...

    flex xml生成tree 源码

    标题:Flex XML生成Tree源码 描述:此代码示例展示了如何在Flex应用程序中使用XML数据来动态生成一个树形结构(Tree)。Flex是Adobe Systems开发的一款开源框架,用于构建跨平台的桌面和移动设备应用。这段代码通过...

    FLEX ——完美的 TREE

    这可能包括更改默认样式、添加自定义图标、设置可选择性等。 2. **数据提供者**:TREE组件的数据来源于数据提供者,它通常是一个XML或ArrayCollection对象。你需要知道如何将数据结构转化为FLEX可以理解的形式,...

    构造flex3.5的带复选框的树(CheckBoxTree)

    在Flex 3中实现这个功能,我们可以利用Flex的Tree组件和CheckBox组件,结合XML数据源来构建这个自定义的控件。以下是一个详细步骤的概述: 1. **创建Tree组件**:首先,我们需要创建一个Tree组件,这是展示树状结构...

    Flex tree加虚线显示效果并且替代原始图标

    在了解Flex Tree加虚线显示效果并替代原始图标的知识点之前,首先需要对Flex Tree组件有所了解。Flex Tree组件是基于Flash平台的一种树形视图组件,广泛应用于Flex和Flash Builder等开发环境中。它能够以图形化的...

    flex tree checkbox

    在Flex中添加复选框到Tree节点,通常需要自定义TreeItemRenderer。ItemRenderer是Flex提供的一种机制,允许开发者为UIComponent的每个项提供自定义的显示方式。对于TreeChk项目,我们可能需要创建一个新的MXML或...

    flex tree 中渲染checkBox

    在Flex中,你可以通过CSS或直接在组件上设置`icon`属性来改变CheckBox的图标。对于自定义样式,可以创建一个CSS文件,定义`.checkbox`类,然后在`CheckTreeRenderer`中引用这个类,以应用相应的图像。 在实现这个...

    Flex4_DataGrid_Tree_条目渲染器_源码

    总之,了解并熟练掌握Flex4的DataGrid和Tree组件,以及如何自定义条目渲染器,对于构建用户界面和提升用户体验至关重要。这不仅涉及到数据绑定、事件处理,还涵盖了组件的可扩展性和自定义性,是Flex开发中的重要...

    flex可扩展,动态改变图标的小树

    Flex中的树形控件(Tree)允许开发者展示层次结构的数据,它支持自定义图标以增强视觉效果。在动态改变图标这一特性中,我们可以根据业务逻辑或者用户交互来改变树节点的图标,例如,当用户展开或折叠节点时,可以...

    Flex combox

    这需要重写ComboBox的createPopUp()方法,创建一个包含自定义Tree的PopUpBridge实例。 4. **数据绑定**:确保Tree的数据源与ComboBox的下拉列表项相匹配。通常,数据源是一个ArrayCollection或XMLListCollection,...

Global site tag (gtag.js) - Google Analytics