Flex 3 AdvancedDataGrid的使用(四)

轉自 http://hi.baidu.com/lz0830/blog/item/cc20dd120fbbbe58f919b866.html

顯示分層XML數據

前面章節的示例中使用ArrayCollection來創建AdvancedDataGrid控件。您也可以使用分層XML數據來創建AdvancedDataGrid控件。以下示例修改前面章節的數據格式化爲XML，然後將數據傳遞給AdvancedDataGrid控件：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[
   import mx.collections.HierarchicalData;
   import mx.collections.XMLListCollection;
  ]]>
 </mx:Script>
 <mx:XMLList id="dpHierarchyXML" >
  <Region Region="Southwest">
   <Region Region="Arizona">
    <Territory_Rep Territory_Rep="Barbara Jennings"
     Actual="38865" Estimate="40000"/>
    <Territory_Rep Territory_Rep="Dana Binn"
     Actual="29885" Estimate="30000"/>
   </Region>
   <Region Region="Central California">
    <Territory_Rep Territory_Rep="Joe Smith"
     Actual="29134" Estimate="30000"/>
   </Region>
   <Region Region="Nevada">
    <Territory_Rep Territory_Rep="Bethany Pittman"
     Actual="52888" Estimate="45000"/>
   </Region>
   <Region Region="Northern California">
    <Territory_Rep Territory_Rep="Lauren Ipsum"
     Actual="38805" Estimate="40000"/>
    <Territory_Rep Territory_Rep="T.R. Smith"
     Actual="55498" Estimate="40000"/>
   </Region>
   <Region Region="Southern California">
    <Territory_Rep Territory_Rep="Alice Treu"
     Actual="44985" Estimate="45000"/>
    <Territory_Rep Territory_Rep="Jane Grove"
     Actual="44913" Estimate="45000"/>
   </Region>
  </Region>
 </mx:XMLList>
 <mx:AdvancedDataGrid width="100%" height="100%"
  dataProvider="{new HierarchicalData(dpHierarchyXML)}">
  <mx:columns>
   <mx:AdvancedDataGridColumn dataField="@Region"
    headerText="Region"/>
   <mx:AdvancedDataGridColumn dataField="@Territory_Rep"
    headerText="Territory Rep"/>
   <mx:AdvancedDataGridColumn dataField="@Actual"
    headerText="Actual"/>
   <mx:AdvancedDataGridColumn dataField="@Estimate"
    headerText="Estimate"/>
  </mx:columns>
 </mx:AdvancedDataGrid>
</mx:Application>

運行示例

顯示分組數據

分組數據是組織爲同一層次以在AdvancedDataGrid控件中顯示的扁平數據。要分組您的數據，您要指定一個更多的字段來將數據歸集爲同一層次下。

要使用分組數據來生成AdvancedDataGrid控件，您需要從您的扁平數據中創建一個GroupingCollection類的實例，然後將該GroupingCollection實例作爲數據源傳遞給AdvancedDataGrid控件。當年從扁平數據創建一個GroupingCollection類的實例時，您需要指定數據中的那些字段用於創建層次。

本節中大部份示例使用如下扁平數據來創建GroupingCollection類的實例：

[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
 {Region:"Southwest", Territory:"Arizona",
  Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
 {Region:"Southwest", Territory:"Arizona",
  Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
 {Region:"Southwest", Territory:"Central California",
  Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
 {Region:"Southwest", Territory:"Nevada",
  Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
 {Region:"Southwest", Territory:"Northern California",
  Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
 {Region:"Southwest", Territory:"Northern California",
  Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
 {Region:"Southwest", Territory:"Southern California",
  Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
 {Region:"Southwest", Territory:"Southern California",
  Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);

以下示例使用該數據：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   include "SimpleFlatData.as"
  ]]>
 </mx:Script>
 <mx:AdvancedDataGrid id="myADG"
  width="100%" height="100%"
  initialize="gc.refresh();">
  <mx:dataProvider>
   <mx:GroupingCollection id="gc" source="{dpFlat}">
    <mx:grouping>
     <mx:Grouping>
     <mx:GroupingField name="Region"/>
     <mx:GroupingField name="Territory"/>
     </mx:Grouping>
    </mx:grouping>
   </mx:GroupingCollection>
  </mx:dataProvider>
  <mx:columns>
   <mx:AdvancedDataGridColumn dataField="Region"/>
   <mx:AdvancedDataGridColumn dataField="Territory"/>
   <mx:AdvancedDataGridColumn dataField="Territory_Rep"
    headerText="Territory Rep"/>
   <mx:AdvancedDataGridColumn dataField="Actual"/>
   <mx:AdvancedDataGridColumn dataField="Estimate"/>
  </mx:columns>
 </mx:AdvancedDataGrid>
</mx:Application>

運行示例

上面的示例中使用倆個字段來分組數據：Region和Territory。

GroupingCollection實例實際上基於這些字段重新格式化數據以作爲GroupingCollection實例的內部數據表示，如下所示：

[{GroupLabel:"Southwest", children:[
 {GroupLabel:"Arizona", children:[
  {Region:"Southwest", Territory:"Arizona",
   Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
  {Region:"Southwest", Territory:"Arizona",
   Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]}
 {GroupLabel:"Central California", children:[
  {Region:"Southwest", Territory:"Central California",
   Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]}
 {GroupLabel:"Nevada", children:[
  {Region:"Southwest", Territory:"Nevada",
   Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]}
 {GroupLabel:"Northern California", children:[
  {Region:"Southwest", Territory:"Northern California",
   Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
  {Region:"Southwest", Territory:"Northern California",
   Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]}
 {GroupLabel:"Southern California", children:[
  {Region:"Southwest", Territory:"Southern California",
   Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
  {Region:"Southwest", Territory:"Southern California",
   Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}]

注意該表示的爲基於扁平數據的Region和Territory字段的數據分層結構，該GroupingCollection實例同樣包含輸入的扁平數據的原始行，但是這些行被基於分組字段組織爲分層結構。缺省的被用來從扁平數據創建層次結構的數據字段名是GroupLabel。您可以使用Grouping.label屬性來指定不同的名字。

AdvancedDataGrid控件使用GroupLabel字段定義導航樹分支節點的標籤。AdvancedDataGrid控件的第一列同樣與Region字段相對應。所以導航樹使用Region字段來定義樹葉子節點的標籤。

grouping屬性是GroupingCollection類的缺省MXML屬性，所以您可以如下重寫前面的示例：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   include "SimpleFlatData.as"
  ]]>
 </mx:Script>
 <mx:AdvancedDataGrid id="myADG"
  width="100%" height="100%"
  initialize="gc.refresh();">
  <mx:dataProvider>
   <mx:GroupingCollection id="gc" source="{dpFlat}">
    <mx:grouping>
     <mx:GroupingField name="Region"/>
     <mx:GroupingField name="Territory"/>
    </mx:grouping>
   </mx:GroupingCollection>
  </mx:dataProvider>
  <mx:columns>
   <mx:AdvancedDataGridColumn dataField="Region"/>
   <mx:AdvancedDataGridColumn dataField="Territory"/>
   <mx:AdvancedDataGridColumn dataField="Territory_Rep"
    headerText="Territory Rep"/>
   <mx:AdvancedDataGridColumn dataField="Actual"/>
   <mx:AdvancedDataGridColumn dataField="Estimate"/>
  </mx:columns>
 </mx:AdvancedDataGrid>
</mx:Application>

調用GroupingCollection.refresh()方法

GroupingCollection.refresh()方法將GroupingCollection類的設置應用到數據中。您必須在任何時候您通過設置GroupingCollection類的grouping、 source或summaries屬性修改了GroupingCollection類時調用該方法。

爲GroupLabel字段創建列

顯示分組數據時可選地可以爲分組字段生成的頂層條目創建一個單獨列。例如，您使用Region和Territory字段來對扁平數據進行分組，這些字段被作爲分支節點的標籤顯示在導航樹上，所以您爲這些列省去了單獨的列，如下所示：

以下代碼創建該示例。注意該示例爲GroupLabel字段包含了一個AdvancedDataGridColumn實例。對於Region和Territory沒有定義列：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   include "SimpleFlatData.as";
  ]]>
 </mx:Script>
 <mx:AdvancedDataGrid id="myADG"
  width="100%" height="100%"
  defaultLeafIcon="{null}"
  initialize="gc.refresh();">
  <mx:dataProvider>
   <mx:GroupingCollection id="gc" source="{dpFlat}">
    <mx:Grouping>
     <mx:GroupingField name="Region"/>
     <mx:GroupingField name="Territory"/>
    </mx:Grouping>
   </mx:GroupingCollection>
  </mx:dataProvider>
  <mx:columns>
   <mx:AdvancedDataGridColumn dataField="GroupLabel"
    headerText="Region/Territory"/>
   <mx:AdvancedDataGridColumn dataField="Territory_Rep"
    headerText="Territory Rep"/>
   <mx:AdvancedDataGridColumn dataField="Actual"/>
   <mx:AdvancedDataGridColumn dataField="Estimate"/>
  </mx:columns>
 </mx:AdvancedDataGrid>
</mx:Application>

運行示例

在ActionScript中創建分組
前面章節的示例我們使用的是MXML來創建分組，然而，您可能想讓用戶實時定義分組。以下示例通過事件處理器在ActionScript中創建分組：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
  <![CDATA[
   import mx.collections.GroupingField;
   import mx.collections.Grouping;
   import mx.collections.GroupingCollection;
   import mx.collections.ArrayCollection;
   include "SimpleFlatData.as";
   [Bindable]
   public var myGColl:GroupingCollection = new GroupingCollection();
   private var myGrp:Grouping = new Grouping();
   private function initDG():void {
    // Initialize the GroupingCollection instance.
    myGColl.source = dpFlat;
    // The Grouping instance defines the grouping fields
    // in the collection, and the order of the groups
    // in the hierarchy.
    myGrp.fields =
     [new GroupingField("Region"), new GroupingField("Territory")];
    // The grouping property contains a Grouping instance.
    myGColl.grouping = myGrp;
    // Specify the GroupedCollection as the data provider for
    // the AdvancedDataGrid control.
    myADG.dataProvider=myGColl;
    // Refresh the display.
    myGColl.refresh();
   }
  ]]>
</mx:Script>
<mx:AdvancedDataGrid id="myADG"
  width="100%" height="100%"
  creationComplete="initDG();">
  <mx:columns>
   <mx:AdvancedDataGridColumn dataField="Region"/>
   <mx:AdvancedDataGridColumn dataField="Territory"/>
   <mx:AdvancedDataGridColumn dataField="Territory_Rep"
    headerText="Territory Rep"/>
   <mx:AdvancedDataGridColumn dataField="Actual"/>
   <mx:AdvancedDataGridColumn dataField="Estimate"/>
  </mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>

運行示例

Flex 3 AdvancedDataGrid的使用(四)

PDManer [元數建模]-v4.9.0 發佈：一款簡單好用的數據庫建模平臺

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

sql求連續值問題

cs01 CSS Syntax

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

[MASM拾遺]Offset僞指令

h30 HTML Layout Elements

瞭解顯卡

一款基於C#開發的通訊調試工具（支持Modbus RTU、MQTT調試）

Linux/Golang/glibC系統調用

Flex 3 AdvancedDataGrid的使用(二)

Flex 3 AdvancedDataGrid的使用(四)

Flex 3 advancedDataGrid的使用(一)

Flex 3 AdvancedDataGrid的使用(三)

Flex 3 AdvancedDataGrid的使用(五)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結