[flex]flex tree使用心得

目录

1. 关键属性
   1. labelField
   2. dataProvider
   3. 事件

切换行号显示

<mx:Tree id="resTree" width="100%" height="100%" 
        labelField="@label" dataProvider="{resTmp}"
        showRoot="true"
        alternatingItemColors="[#FFFFFF,#EEDDEE]"    
        doubleClickEnabled="true"    
        indentation="15"/>

 

关键属性

 

labelField

• 作为标签显示的字段名称
  1. 默认使用"label"查找, 注意xml时需要加"@"符号
  2. 可以通过修改labelField，显示自己需要的标签(如下xml，需要配置为labelField="fullName")
     切换行号显示

     <all fullName="根节点">
             <man fullName="张三"/>
             <man fullName="李斯"/>
     </all>
     

  3. 对于上面的xml数据，tree如果没有配置labelField，那么label文本将使用XMLNode as String输出.

 

dataProvider

• 用作数据绑定
• 绑定后Tree类将按照下列方式处理源数据对象：
  1. 样本xml:
     切换行号显示

     <all fullName="根节点">
             <man fullName="张三"/>
             <man fullName="李斯"/>
     </all>
     

  2. 将包含有效 XML 文本的 String 转换为 XMLListCollection
     切换行号显示

             tree.dataProvider = xmlString;
     

  3. 将 XMLNode 转换为 XMLListCollection
     切换行号显示

             tree.dataProvider = XML(xmlString);
     

  4. 将 XMLList 转换为 XMLListCollection
     切换行号显示

             tree.dataProvider = XML(xmlString).elements("man");
     

  5. 将实现 ICollectionView 接口的任何对象转换为 ICollectionView

  6. 将 Array 转换为 ?ArrayCollection

  7. 将任何其它类型的对象作为 Array 的唯一条目纳入该 Array 中
  8. json方式，定义如下，然后dataProvider="{json}"即可，注意这里的labelField默认为label，可以生效，xml时使用labelField="@label"，xml时需要加@符号
     切换行号显示

     [Bindable] public var json:Object = new Object(); 
     json = [{
             label: 'root',
             children: [{
                     label: 'host',
                     children: [{
                             label: 'windows'
                     }, {
                             label: 'linux'
                     }]
             }]
     }];
     

 

事件

• itemClick、doubleClick等产生event事件
  1. event中读取数据;
     切换行号显示

     var obj:Object = event.itemRenderer.data;
     trace("当前数据：", obj);
     

  2. trace输出叶子节点可能为空，实际上obj有数据，切记切记