flex AdvancedDataGrid 進階表格 介紹 教程

AdvancedDataGrid 控制項擴充了標準 DataGrid 控制項的功能，為 Adobe Flex 應用程式增添了資料視覺效果功能。藉助這些功能，可以更好地控制資料顯示、資料彙總和資料格式設定。AdvancedDataGrid 控制項與 List 控制項類似，但前者能夠顯示多列資料，因而可顯示具有多個屬性的對象。 
  AdvancedDataGrid 控制項提供下列功能： 
列可以具有不同寬度或同一固定寬度。 使用者可以在運行時調整列的尺寸。 使用者可以在運行時重新排序的列。 可選擇自訂欄標題。 能夠對任何列使用自訂項呈示器來顯示資料（而非文本）。 支援通過單擊某列對資料排序。                  AdvancedDataGrid 控制項設計用於查看資料，而非用作類似於 HTML 表的布局工具

官方文檔 http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7be0.html
http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/controls/AdvancedDataGrid.html



儲存格內可以顯示多組資料


表頭跨儲存格

其中資料來源為"SimpleFlatData.as" 具體請看 http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7bf4.html
複製代碼 <?xml version="1.0"?> <!-- dpcontrols/adg/ColumnGroupADG.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"     xmlns:mx="library://ns.adobe.com/flex/mx"     xmlns:s="library://ns.adobe.com/flex/spark">     <fx:Script>         <![CDATA[             import mx.collections.ArrayCollection;                               // Import the data used by the AdvancedDataGrid control.             include "SimpleFlatData.as";         ]]>     </fx:Script>     <mx:AdvancedDataGrid id="myADG"         dataProvider="{dpFlat}"         width="100%" height="100%">         <mx:groupedColumns>             <mx:AdvancedDataGridColumn dataField="Region"/>             <mx:AdvancedDataGridColumn dataField="Territory"/>             <mx:AdvancedDataGridColumn dataField="Territory_Rep"                 headerText="Territory Rep"/>             <mx:AdvancedDataGridColumnGroup headerText="Revenues">                    <mx:AdvancedDataGridColumn dataField="Actual"/>                 <mx:AdvancedDataGridColumn dataField="Estimate"/>             </mx:AdvancedDataGridColumnGroup>            </mx:groupedColumns>    </mx:AdvancedDataGrid> </s:Application>
點擊播放flash


按照多個條件（多個表頭）排序 
點擊如圖表頭右邊箭頭位置可以按照多個條件排序， 如果點擊表頭左邊部分為重新以第一條件排序 此時sortExpertMode屬性為false
如果設定sortExpertMode 屬性為true時 需要按住 ctrl 鍵來點擊表頭實現多條件排序
如果想禁止排序功能 請把 AdvancedDataGrid.sortableColumns屬性 設定為 false

請看設定sortExpertMode 屬性為true時的例子 需要按住 ctrl 鍵來點擊表頭實現多條件排序
複製代碼 <?xml version="1.0"?> <!-- dpcontrols/adg/SimpleADG.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"     xmlns:mx="library://ns.adobe.com/flex/mx"     xmlns:s="library://ns.adobe.com/flex/spark">     <fx:Script>       <![CDATA[          import mx.collections.ArrayCollection;                            [Bindable]          private var dpADG:ArrayCollection = new ArrayCollection([            {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},            {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99},            {Artist:'Saner', Album:'A Child Once', Price:11.99},            {Artist:'Saner', Album:'Helium Wings', Price:12.99},            {Artist:'The Doors', Album:'The Doors', Price:10.99},            {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},            {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},            {Artist:'Grateful Dead', Album:'In the Dark', Price:11.99},            {Artist:'Grateful Dead', Album:'Shakedown Street', Price:11.99},            {Artist:'The Doors', Album:'Strange Days', Price:12.99},            {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}          ]);                         ]]>     </fx:Script>     <mx:AdvancedDataGrid         width="100%" height="100%"         sortExpertMode="true"         dataProvider="{dpADG}">         <mx:columns>             <mx:AdvancedDataGridColumn dataField="Artist" />             <mx:AdvancedDataGridColumn dataField="Album" />             <mx:AdvancedDataGridColumn dataField="Price" />         </mx:columns>    </mx:AdvancedDataGrid>        </s:Application>
點擊播放flash

 

相對DataGrid組件，AdvancedDataGrid主要有以下幾個進階之處： 多列排序：按住Control鍵在點擊某一列的表頭來實現多列排序。 自訂行和列樣式：通過設定行和列的styleFunction指向一個函數來樣式化行列 顯示分層資料：在組件的第一列顯示一個可縮放的導航數來控製表格行的顯示。 建立多列分組：將多列匯聚到同一列表頭下。 使用單元渲染器（renderers）：跨越多欄使用同一渲染器或者一列使用多個渲染器。

多列排序

預設的情況下，AdvancedDataGrid是按資料添加到它的DataProvider的順序顯示資料，和DataGrid組件一樣，AdvancedDataGrid也允許您在資料顯示後對資料進行排序。不同的是DataGrid只能基於單列排序，而AdvancedDataGrid支援基於多列的排序。

以下是多列排序的樣本：

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">     <mx:Script>      <![CDATA[         import mx.collections.ArrayCollection;                           [Bindable]         private var dpADG:ArrayCollection = new ArrayCollection([           {Artist:'Pavement', Album:'Slanted and Enchanted', Price:12.99},           {Artist:'Pavement', Album:'Brighten the Corners', Price:13.99},           {Artist:'Saner', Album:'A Child Once', Price:14.99},           {Artist:'Saner', Album:'Helium Wings', Price:12.99},           {Artist:'The Doors', Album:'The Doors', Price:10.99},           {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},           {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},           {Artist:'Grateful Dead', Album:'In the Dark', Price:17.99},           {Artist:'Grateful Dead', Album:'Shakedown Street', Price:13.99},           {Artist:'The Doors', Album:'Strange Days', Price:12.99},           {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}         ]);                         ]]>    </mx:Script>     <mx:AdvancedDataGrid width="100%" height="100%"        dataProvider="{dpADG}">        <mx:columns>            <mx:AdvancedDataGridColumn dataField="Artist" />            <mx:AdvancedDataGridColumn dataField="Album" />            <mx:AdvancedDataGridColumn dataField="Price" />        </mx:columns>    </mx:AdvancedDataGrid> </mx:Application>

運行樣本

運行以上樣本，如下進行排序： 點擊AdvancedDataGrid組件的任意列表頭對任意列進行排序，例如點擊Artist列的列表頭Artist列將升序進行排序，再次點擊的話將按降序排序。 按住Control鍵，點擊其他任意的列頭，例如點擊Price列頭，將在保持Artist列降序排列的情況下，將Price列按升序排列。現在你可以從中發現某一藝術家最便宜的專輯。 再次點擊Price列頭，Price列將按降序排列 按住Control鍵，點擊任意其他列，將其加入排序條件中。

自訂行列樣式

通過使用AdvancedDataGrid組件的回調(callback)函數來自訂表格格行列的樣式，要控制某一行的樣式，使用AdvancedDataGrid.styleFunction屬性，要自訂某一列的樣式，使用AdvancedDataGridColumn.styleFunction屬性，AdvancedDataGrid.styleFunction指定的回呼函數先執行，接著才執行AdvancedDataGridColumn.styleFunction屬性指定的函數。

回呼函數必須要有如下聲明：

public function myStyleFunction(data:Object,column:SuperDataGridColumn):Object

該函數返回一個包含用於表示樣式設定的styleName:value對的完整對象，或者null。styleName為樣式屬性的名稱，如Color，而value為樣式屬性的值，如0x00FF00。

AdvancedDataGrid會在更新顯示時調用回呼函數，如應用啟動時該組件第一次會繪製的時候，或者在您調用invalidateList()來重新整理組件所有行的顯示時。

本節的樣本將使用回呼函數來定義AdvancedDataGrid的樣式，本節中所有的樣本都使用以下StyleData.as檔案中的資料：

[Bindable] private var dpADG:ArrayCollection = new ArrayCollection([   {Artist:'Pavement', Album:'Slanted and Enchanted', Price:12.99},   {Artist:'Pavement', Album:'Brighten the Corners', Price:13.99},   {Artist:'Saner', Album:'A Child Once', Price:14.99},   {Artist:'Saner', Album:'Helium Wings', Price:12.99},   {Artist:'The Doors', Album:'The Doors', Price:10.99},   {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},   {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},   {Artist:'Grateful Dead', Album:'In the Dark', Price:17.99},   {Artist:'Grateful Dead', Album:'Shakedown Street', Price:13.99},   {Artist:'The Doors', Album:'Strange Days', Price:12.99},   {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99} ]);

定義行樣式

以下樣本使用AdvancedDataGrid.styleFunction屬性指定一個回呼函數來定義表格行樣式。在該樣本中，您可以使用Button控制項來選擇AdvancedDataGrid.styleFunction中的artist，然後回呼函數將會紅色高亮顯示所有被選擇的行。

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script>  <![CDATA[   import mx.collections.ArrayCollection;   import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;   // Include the data for the AdvancedDataGrid control.   include "StyleData.as"   // Artist name to highlight.   protected var artistName:String;   // Event handler to set the selected artist's name   // based on the selected Button control.   public function setArtistName(event:Event):void   {    artistName=Button(event.currentTarget).label;    // Refresh row display.    myADG.invalidateList();   }   // Callback function that hightlights in red   // all rows for the selected artist.   public function myStyleFunc(data:Object,    col:AdvancedDataGridColumn):Object   {    if (data["Artist"] == artistName)    return {color:0xFF0000};    // Return null if the Artist name does not match.    return null;   }  ]]> </mx:Script> <mx:AdvancedDataGrid id="myADG" width="100%" height="100%" dataProvider="{dpADG}" styleFunction="myStyleFunc">  <mx:columns>   <mx:AdvancedDataGridColumn dataField="Artist"/>   <mx:AdvancedDataGridColumn dataField="Album"/>   <mx:AdvancedDataGridColumn dataField="Price"/>  </mx:columns> </mx:AdvancedDataGrid> <mx:HBox>  <mx:Button label="Pavement" click="setArtistName(event);"/>  <mx:Button label="Saner" click="setArtistName(event);"/>  <mx:Button label="The Doors" click="setArtistName(event);"/> </mx:HBox></mx:Application>

運行樣本

定義列樣式

以下樣本修改上節的樣本來定義AdvancedDataGrid的行和列樣式。在該樣本中，所有價格小於$11.00的單元都將顯示為綠色。

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script>  <![CDATA[   import mx.collections.ArrayCollection;   import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;   // Include the data for the AdvancedDataGrid control.   include "StyleData.as"   // Artist name to highlight.   protected var artistName:String;   // Event handler to set the selected artist's name   // based on the selected Button control.   public function setArtistName(event:Event):void   {    artistName=Button(event.currentTarget).label;    // Refresh row display.    myADG.invalidateList();   }   // Callback function that hightlights in red   // all rows for the selected artist.   public function myStyleFunc(data:Object,    col:AdvancedDataGridColumn):Object   {    if (data["Artist"] == artistName)    return {color:0xFF0000};    // Return null if the Artist name does not match.    return null;   }   // Callback function that hightlights in green   // all entries in the Price column   // with a value less than $11.00.   public function myColStyleFunc(data:Object,    col:AdvancedDataGridColumn):Object   {    if(data["Price"] <= 11.00)     return {color:0x00FF00};    return null;   }  ]]> </mx:Script> <mx:AdvancedDataGrid id="myADG"  width="100%" height="100%"  dataProvider="{dpADG}"  styleFunction="myStyleFunc">  <mx:columns>   <mx:AdvancedDataGridColumn dataField="Artist"/>   <mx:AdvancedDataGridColumn dataField="Album"/>   <mx:AdvancedDataGridColumn dataField="Price"    styleFunction="myColStyleFunc"/>  </mx:columns> </mx:AdvancedDataGrid> <mx:HBox>  <mx:Button label="Pavement" click="setArtistName(event);"/>  <mx:Button label="Saner" click="setArtistName(event);"/>  <mx:Button label="The Doors" click="setArtistName(event);"/> </mx:HBox></mx:Application>

運行樣本

在列中使用資料格式器（formatter）

AdvancedDataGridColumn有一個formatter屬性，通過它，您可以向列傳遞一個Formatter類，或者Formatter子類的執行個體。格式器類可以將資料轉換為自訂的字串。例如您可以使用CurrencyFormatter類在Price列值的加上美元符($)首碼。

格式器類可以和labelFunction屬性或styleFunction屬性設定的回呼函數一起使用，如果您指定了一個回呼函數，Flex在回呼函數值返回後調用格式器類。

以下樣本在修改自自訂行樣式章節樣本，在Price列增加了一個貨幣格式器以在價格前顯示$首碼：

<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script>  <![CDATA[   import mx.collections.ArrayCollection;   import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;   // Include the data for the AdvancedDataGrid control.   include "StyleData.as"   // Artist name to highlight.   protected var artistName:String;   // Event handler to set the selected artist's name   // based on the selected Button control.   public function setArtistName(event:Event):void   {    artistName=Button(event.currentTarget).label;    // Refresh row display.    myADG.invalidateList();   }   // Callback function that hightlights in red   // all rows for the selected artist.   public function myStyleFunc(data:Object,    col:AdvancedDataGridColumn):Object   {    if (data["Artist"] == artistName)    return {color:0xFF0000};    // Return null if the Artist name does not match.