flex的tree根据属性值改变所有节点图标的方法

最新推荐文章于 2021-05-06 17:22:32 发布

原创最新推荐文章于 2021-05-06 17:22:32 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#tree #flex #application #class #function #encoding

Flex 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在Flex中使用MX组件库的Tree组件，并通过动态设置图标展示不同的节点状态。具体实现包括使用XMLListCollection作为数据源，定义自定义函数iconFun来根据节点属性选择合适的图标。

代码：

--------------------------------------------------------------------------------

<?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>

可以复写Ｔｒｅｅ组件，在其单元格TreeItemRenderer内的commitProperties方法中进行判断然和赋值
icon.source = iconClass;
不知道可不可以。以前在ＴｉｌｅＬｉｓｔ和ＤａｔａＧｒｉｄ中用过

override protected function commitProperties():void
{
  super.commitProperties();
  if(super.data){
   if( super.data.@label=="调度时间"){
     super.removeChild(DisplayObject(icon));
     var iconClass:Class = iconDesign;
    icon = new iconClass();
    addChild(DisplayObject(icon));
   }
  }


  }