Flex之旅--AdvancedDataGrid 修改樹節點表徵圖

        使用Flex AdvancedDataGrid可以在列表中展示樹形結構，但預設的表徵圖為檔案夾及檔案表徵圖，如圖。如果想修改表徵圖，且只是簡單替換預設表徵圖可以使用如下方式：

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

        

        但如果想根據資料不同，顯示不同的表徵圖會麻煩一些。如上圖，要求不同部門顯示不同表徵圖，人員要根據職位顯示不同表徵圖。在測試過程中試過使用姓名列的itemRenderer，但這種方法只能改掉葉子節點的表徵圖，非葉子節點的檔案夾表徵圖改不掉。後來試過直接使用AdvancedDataGrid的itemRenderer，但也沒能實現想要的效果。最後還是從folderOpenIcon，folderClosedIcon，defaultLeafIcon入手，寫一個類繼承Image，根據資料不同賦不同的source值，代碼如下：

package com.demo{import flash.events.Event;import mx.controls.Alert;import mx.controls.Image;import mx.controls.advancedDataGridClasses.AdvancedDataGridGroupItemRenderer;import mx.formatters.DateFormatter;public class FolderAndLeafIcon extends Image{[Embed(source="assets/images/employee.jpg")]   private const employee:Class;[Embed(source="assets/images/manager.jpg")]   private const manager:Class;[Embed(source="assets/images/renli.jpg")]   private const renli:Class;[Embed(source="assets/images/yanfa.jpg")]   private const yanfa:Class;public function FolderAndLeafIcon(){super();this.addEventListener(Event.ADDED_TO_STAGE, setIconSource);}private function setIconSource(event:Event):void{var folderIcon:FolderAndLeafIcon = event.currentTarget as FolderAndLeafIcon;if(folderIcon){folderIcon.source = getIconSourceValue(folderIcon);}}public function getIconSourceValue(folderIcon:FolderAndLeafIcon):Class{var advancedGridGroupItemRender:AdvancedDataGridGroupItemRenderer = folderIcon.parent as AdvancedDataGridGroupItemRenderer;var source:Class;if(advancedGridGroupItemRender){// 當advancedGridGroupItemRender.data包含dept，name,manager等屬性時，當前是葉子節點if (advancedGridGroupItemRender.data.hasOwnProperty("manager")) {var m:int = advancedGridGroupItemRender.data.manager;if (m == 1) {source = manager;}else if (m == 0) {source = employee;}}else {// 非葉子節點var dept:String = advancedGridGroupItemRender.listData.label;if (dept == "人力") {source = renli;}else if (dept == "研發") {source = yanfa;}}}return source;}}}

        上面代碼獲得advancedGridGroupItemRender是關鍵，還有就是怎樣獲得資料也是關鍵，advancedGridGroupItemRender.listData.label獲得的是目前的儲存格的常值內容，advancedGridGroupItemRender.data獲得的是當前行的資料。非葉子節點時advancedGridGroupItemRender.data得到的行資料是空的，只能通過advancedGridGroupItemRender.listData.label得到目前的儲存格常值內容。測試時在這個地方花費了很多時間，一直得不到data中的屬性值。    

        下面看一下調用的代碼(注意第一列不能設定visible="false"，否則無法顯示資料)：

<fx:Declarations><mx:GroupingCollection id="gc" source="{dataSource}">  <mx:Grouping>  <mx:GroupingField name="dept"/>  </mx:Grouping>  </mx:GroupingCollection> </fx:Declarations><fx:Script><![CDATA[import com.demo.FolderAndLeafIcon;import mx.collections.ArrayCollection;[Bindable]public var dataSource:ArrayCollection = new ArrayCollection([{dept:"人力", name:"張三", sex:0, age:25, telnumber:"123456", manager:1},{dept:"人力", name:"李四", sex:1, age:20, telnumber:"123456", manager:0},{dept:"研發", name:"王五", sex:1, age:21, telnumber:"123456", manager:1},{dept:"研發", name:"趙六", sex:0, age:22, telnumber:"123456", manager:0},{dept:"研發", name:"錢七", sex:1, age:23, telnumber:"123456", manager:0}]);]]></fx:Script><mx:AdvancedDataGrid dataProvider="{gc}" initialize="gc.refresh()" defaultLeafIcon="{FolderAndLeafIcon}" folderOpenIcon="{FolderAndLeafIcon}" folderClosedIcon="{FolderAndLeafIcon}" ><mx:columns><mx:AdvancedDataGridColumn headerText="姓名" dataField="name"  /><mx:AdvancedDataGridColumn headerText="性別" dataField="sex" itemRenderer="com.demo.SexRenderer"/><mx:AdvancedDataGridColumn headerText="年齡" dataField="age" textAlign="center"/><mx:AdvancedDataGridColumn headerText="電話" dataField="telnumber" textAlign="center"/></mx:columns></mx:AdvancedDataGrid>

        上面性別列定義了itemRenderer，顯示圖片，代碼如下：

<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   focusEnabled="true"><fx:Script><![CDATA[import mx.controls.Alert;[Embed(source="assets/images/male.jpg")]   private const male:Class;[Embed(source="assets/images/female.jpg")]   private const female:Class;private function getIcon(sex:String):Class {if (sex == "1") {return male;}else if (sex == "0"){return female;}else {return null;}}private function getIcon1(data:Object):Class {if (data.sex == 1) {return male;}else if (data.sex == 0){return female;}else {return null;}}]]></fx:Script><s:layout><s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" /></s:layout><mx:Image source="{getIcon(listData.label)}"/><!--<mx:Image source="{getIcon1(data)}"/>--></s:MXAdvancedDataGridItemRenderer>

        上面代碼使用兩個方法獲得圖片，一個是通過data，一個是listData.label，還是前面說的，data是當前行資料，listData.label是目前的儲存格文本。最後效果如下圖：

        追加簡單方法：

        發現一簡單方法，AdvancedDataGrid有個iconFunction屬性，類型是function，自己定義一個function返回表徵圖。現在可以刪掉defaultLeafIcon，folderOpenIcon，folderClosedIcon，添加iconFunction="getIcon"，執行效果和前面一樣。

private function getIcon(item:Object):Class {var source:Class;// 如果是非葉子節點，則item存在GroupLabel屬性，值為節點文字內容if (item.GroupLabel == "人力") {source = renli;}else if (item.GroupLabel == "研發") {source = yanfa;}else {// 葉子節點時item為當前行資料if (item.manager == 1) {source = manager;}else if (item.manager == 0) {source = employee;}}return source;}

下圖為debug模式下，item對象資料內容：