Adobe Flex 3 ヘルプ

階層データの表示

階層データとは構造化されたフォーマットのデータで、データが既に階層構造に配列されています。AdvancedDataGrid コントロールで階層データを表示するには、コントロールのデータプロバイダを HierarchicalData クラスのインスタンスに設定します。データプロバイダのデータの構造によって、AdvancedDataGrid コントロールでデータを表示する方法が定義されます。

ArrayCollection を使用した階層データの定義

以下の SimpleHierarchicalData.as ファイルの例で示されているように、階層データの作成には ArrayCollection を使用する方法が一般的です。この例では、ルートレベルと 2 つの子レベルの 3 レベルでデータが構成されています。

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

この例では、ArrayCollection 定義で children キーワードを使用し、データ階層を定義しています。children キーワードは、HierarchicalData クラスで階層を定義する場合に、デフォルトで使用されるキーワードです。

別のキーワードを使用して、階層を定義することもできます。次の例は、categories キーワードを使用した HierarchicalDataCategories.as ファイルを示したものです。

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

次の例のように、HierarchicalData.childrenField プロパティを使用して、階層を定義するフィールドの名前を指定します。

<?xml version="1.0"?>
<!-- dpcontrols/adg/HierarchicalADGCategories.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Script>
    <![CDATA[
          import mx.collections.ArrayCollection;
                
          include "HierarchicalDataCategories.as";
      ]]>
    </mx:Script>

    <mx:AdvancedDataGrid width="100%" height="100%"> 
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}" 
                childrenField="categories"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>    
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

階層 XML データの表示

前のセクションの例では、ArrayCollection を使用して AdvancedDataGrid コントロールに表示するデータを設定しました。コントロールに表示するデータは、階層 XML データを使用して設定することもできます。次の例は、前のセクションのデータを XML 形式に変更したもので、データを AdvancedDataGrid コントロールに渡しています。

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleHierarchicalADGXML.mxml -->
<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>

前の例で実行する SWF ファイルは以下のとおりです。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート