Flex之旅--AdvancedDataGrid 修改树节点图标

使用Flex AdvancedDataGrid可以在列表中展示树形结构，但默认的图标为文件夹及文件图标，如图。如果想修改图标，且只是简单替换默认图标可以使用如下方式：

[html]   view plain copy

1. <mx:AdvancedDataGrid folderOpenIcon="@Embed('assets/images/open.jpg')"   
2.         folderClosedIcon="@Embed('assets/images/close.jpg')"   
3.         defaultLeafIcon="@Embed('assets/images/leaf.jpg')">  

        

        但如果想根据数据不同，显示不同的图标会麻烦一些。如上图，要求不同部门显示不同图标，人员要根据职位显示不同图标。在测试过程中试过使用姓名列的itemRenderer，但这种方法只能改掉叶子节点的图标，非叶子节点的文件夹图标改不掉。后来试过直接使用AdvancedDataGrid的itemRenderer，但也没能实现想要的效果。最后还是从folderOpenIcon，folderClosedIcon，defaultLeafIcon入手，写一个类继承Image，根据数据不同赋不同的source值，代码如下：

[java]   view plain copy

1. package com.demo  
2. {  
3.     import flash.events.Event;  
4.     import mx.controls.Alert;  
5.     import mx.controls.Image;  
6.     import mx.controls.advancedDataGridClasses.AdvancedDataGridGroupItemRenderer;  
7.     import mx.formatters.DateFormatter;  
8.   
9.     public class FolderAndLeafIcon extends Image  
10.     {  
11.         [Embed(source="assets/images/employee.jpg")]     
12.         private const employee:Class;  
13.           
14.         [Embed(source="assets/images/manager.jpg")]     
15.         private const manager:Class;  
16.           
17.         [Embed(source="assets/images/renli.jpg")]     
18.         private const renli:Class;  
19.           
20.         [Embed(source="assets/images/yanfa.jpg")]     
21.         private const yanfa:Class;  
22.           
23.         public function FolderAndLeafIcon()  
24.         {  
25.             super();  
26.             this.addEventListener(Event.ADDED_TO_STAGE, setIconSource);  
27.         }  
28.           
29.         private function setIconSource(event:Event):void{  
30.             var folderIcon:FolderAndLeafIcon = event.currentTarget as FolderAndLeafIcon;  
31.               
32.             if(folderIcon){  
33.                 folderIcon.source = getIconSourceValue(folderIcon);  
34.             }  
35.         }  
36.           
37.         public function getIconSourceValue(folderIcon:FolderAndLeafIcon):Class{  
38.             var advancedGridGroupItemRender:AdvancedDataGridGroupItemRenderer = folderIcon.parent as AdvancedDataGridGroupItemRenderer;  
39.             var source:Class;  
40.               
41.             if(advancedGridGroupItemRender){  
42.                   
43.                 // 当advancedGridGroupItemRender.data包含dept，name,manager等属性时，当前是叶子节点  
44.                 if (advancedGridGroupItemRender.data.hasOwnProperty("manager")) {  
45.                       
46.                     var m:int = advancedGridGroupItemRender.data.manager;  
47.                       
48.                     if (m == 1) {  
49.                         source = manager;  
50.                     }  
51.                     else if (m == 0) {  
52.                         source = employee;  
53.                     }  
54.                 }  
55.                 else {  // 非叶子节点  
56.                     var dept:String = advancedGridGroupItemRender.listData.label;  
57.                   
58.                     if (dept == "人力") {  
59.                         source = renli;  
60.                     }  
61.                     else if (dept == "研发") {  
62.                         source = yanfa;  
63.                     }  
64.                 }  
65.             }  
66.               
67.             return source;  
68.         }  
69.     }  
70. }  

        上面代码获得advancedGridGroupItemRender是关键，还有就是怎样获得数据也是关键，advancedGridGroupItemRender.listData.label获得的是当前单元格的文本内容，advancedGridGroupItemRender.data获得的是当前行的数据。非叶子节点时advancedGridGroupItemRender.data得到的行数据是空的，只能通过advancedGridGroupItemRender.listData.label得到当前单元格文本内容。测试时在这个地方花费了很多时间，一直得不到data中的属性值。    

        下面看一下调用的代码(注意第一列不能设置visible="false"，否则无法显示数据)：

[html]   view plain copy

1. <fx:Declarations>  
2.     <mx:GroupingCollection id="gc" source="{dataSource}">    
3.         <mx:Grouping>    
4.             <mx:GroupingField name="dept"/>    
5.         </mx:Grouping>    
6.     </mx:GroupingCollection>   
7. </fx:Declarations>  
8.   
9. <fx:Script>  
10.     <![CDATA[ 
11.         import com.demo.FolderAndLeafIcon; 
12.          
13.         import mx.collections.ArrayCollection; 
14.         [Bindable] 
15.         public var dataSource:ArrayCollection = new ArrayCollection([ 
16.             {dept:"人力", name:"张三", sex:0, age:25, telnumber:"123456", manager:1}, 
17.             {dept:"人力", name:"李四", sex:1, age:20, telnumber:"123456", manager:0}, 
18.             {dept:"研发", name:"王五", sex:1, age:21, telnumber:"123456", manager:1}, 
19.             {dept:"研发", name:"赵六", sex:0, age:22, telnumber:"123456", manager:0}, 
20.             {dept:"研发", name:"钱七", sex:1, age:23, telnumber:"123456", manager:0} 
21.         ]); 
22.     ]]>  
23. </fx:Script>  
24.   
25. <mx:AdvancedDataGrid dataProvider="{gc}" initialize="gc.refresh()" defaultLeafIcon="{FolderAndLeafIcon}"  
26.                      folderOpenIcon="{FolderAndLeafIcon}" folderClosedIcon="{FolderAndLeafIcon}" >  
27.     <mx:columns>  
28.         <mx:AdvancedDataGridColumn headerText="姓名" dataField="name"  />  
29.         <mx:AdvancedDataGridColumn headerText="性别" dataField="sex" itemRenderer="com.demo.SexRenderer"/>  
30.         <mx:AdvancedDataGridColumn headerText="年龄" dataField="age" textAlign="center"/>  
31.         <mx:AdvancedDataGridColumn headerText="电话" dataField="telnumber" textAlign="center"/>  
32.     </mx:columns>  
33. </mx:AdvancedDataGrid>  

        上面性别列定义了itemRenderer，显示图片，代码如下：

[html]   view plain copy

1. <s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"   
2.                                   xmlns:s="library://ns.adobe.com/flex/spark"   
3.                                   xmlns:mx="library://ns.adobe.com/flex/mx"   
4.                                   focusEnabled="true">  
5.       
6.     <fx:Script>  
7.         <![CDATA[ 
8.             import mx.controls.Alert; 
9.             [Embed(source="assets/images/male.jpg")]    
10.             private const male:Class;    
11.              
12.             [Embed(source="assets/images/female.jpg")]    
13.             private const female:Class;  
14.              
15.             private function getIcon(sex:String):Class { 
16.                  
17.                 if (sex == "1") { 
18.                     return male; 
19.                 } 
20.                 else if (sex == "0"){ 
21.                     return female; 
22.                 } 
23.                 else { 
24.                     return null; 
25.                 } 
26.             } 
27.              
28.             private function getIcon1(data:Object):Class { 
29.                  
30.                 if (data.sex == 1) { 
31.                     return male; 
32.                 } 
33.                 else if (data.sex == 0){ 
34.                     return female; 
35.                 } 
36.                 else { 
37.                     return null; 
38.                 } 
39.             } 
40.         ]]>  
41.     </fx:Script>  
42.     <s:layout>  
43.         <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />  
44.     </s:layout>  
45.     <mx:Image source="{getIcon(listData.label)}"/>  
46.     <!--<mx:Image source="{getIcon1(data)}"/>-->  
47. </s:MXAdvancedDataGridItemRenderer>  

        上面代码使用两个方法获得图片，一个是通过data，一个是listData.label，还是前面说的，data是当前行数据，listData.label是当前单元格文本。最后效果如下图：

        追加简单方法：

        发现一简单方法，AdvancedDataGrid有个iconFunction属性，类型是function，自己定义一个function返回图标。现在可以删掉defaultLeafIcon，folderOpenIcon，folderClosedIcon，添加iconFunction="getIcon"，执行效果和前面一样。

[java]   view plain copy

1. private function getIcon(item:Object):Class {  
2.       
3.     var source:Class;  
4.       
5.     // 如果是非叶子节点，则item存在GroupLabel属性，值为节点文字内容  
6.     if (item.GroupLabel == "人力") {  
7.         source = renli;  
8.     }  
9.     else if (item.GroupLabel == "研发") {  
10.         source = yanfa;  
11.     }  
12.     else {  // 叶子节点时item为当前行数据  
13.         if (item.manager == 1) {  
14.             source = manager;  
15.         }  
16.         else if (item.manager == 0) {  
17.             source = employee;  
18.         }  
19.     }  
20.       
21.     return source;  
22. }  

下图为debug模式下，item对象数据内容：