列グループの作成

次の例のように、列グループを使用して、複数の列を単一の列ヘッダーの下にまとめます。

óÒÉOÉãÅ[ÉvÇšégópÇµÇƒÅAíPàÍÇÃóÒÉwÉbÉ_Å[ÇÃâ½Ç…ï°êîÇÃóÒÇšÇ‹ÇýÇﬂÇ‹Ç²ÅB

この例では、フラットなデータを使用してデータグリッドにデータを設定し、Actual 列と Estimate 列を Revenues という単一の列の下にグループ化します。

AdvancedDataGrid コントロールで列をグループ化するには、次の操作を行います。

AdvancedDataGrid.columns プロパティではなく、AdvancedDataGrid.groupedColumns プロパティを使用して列を指定します。
AdvancedDataGridColumnGroup クラスを使用して、列グループを指定します。

前の図で示された AdvancedDataGrid コントロールを実装するコードは、次のとおりです。

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

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
                  
            // Import the data used by the AdvancedDataGrid control. 
            include "SimpleFlatData.as";
        ]]>
    </mx: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>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

groupedColumns プロパティには、AdvancedDataGridColumn クラスのインスタンスと、AdvancedDataGridColumn クラスのインスタンスが含まれます。AdvancedDataGridColumn クラスのインスタンスは、スタンドアロンの列としてコントロールに表示されます。AdvancedDataGridColumnGroup インスタンスで指定されたすべての列は、グループ化された列として一緒に表示されます。

コントロールには複数のグループを追加できます。次の例では、Area および Revenues という名前のグループを追加します。

<?xml version="1.0"?>
<!-- dpcontrols/adg/ColumnGroupADG2Groups.mxml -->
<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"
        dataProvider="{dpFlat}"
        width="100%" height="100%">
        <mx:groupedColumns>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumnGroup headerText="Area">    
                <mx:AdvancedDataGridColumn dataField="Region"/>
                <mx:AdvancedDataGridColumn dataField="Territory"/>
            </mx:AdvancedDataGridColumnGroup>    
            <mx:AdvancedDataGridColumnGroup headerText="Revenues">    
                <mx:AdvancedDataGridColumn dataField="Actual"/>
                <mx:AdvancedDataGridColumn dataField="Estimate"/>
            </mx:AdvancedDataGridColumnGroup>    
        </mx:groupedColumns>
   </mx:AdvancedDataGrid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

次の例のように、グループをネストして、1 つの列グループに複数の列グループを含めることができます。

<?xml version="1.0"?>
<!-- dpcontrols/adg/ColumnGroupADG2NestedGroups.mxml -->
<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"
        dataProvider="{dpFlat}"
        width="100%" height="100%">
        <mx:groupedColumns>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumnGroup headerText="All Groups">
                <mx:AdvancedDataGridColumnGroup headerText="Area">
                    <mx:AdvancedDataGridColumn dataField="Region"/>
                    <mx:AdvancedDataGridColumn dataField="Territory"/>
                </mx:AdvancedDataGridColumnGroup>
                <mx:AdvancedDataGridColumnGroup headerText="Revenues">
                    <mx:AdvancedDataGridColumn dataField="Actual"/>
                    <mx:AdvancedDataGridColumn dataField="Estimate"/>
                </mx:AdvancedDataGridColumnGroup>
            </mx:AdvancedDataGridColumnGroup>
        </mx:groupedColumns>
   </mx:AdvancedDataGrid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

グループでの列のドラッグ & ドロップ

デフォルトでは、グループの列をそのグループ内でドラッグして、位置を変更することができます。また、グループ全体をドラッグして、AdvancedDataGrid コントロール内で位置を変更することもできます。

グループ内での列のドラッグを無効にするには、AdvancedDataGridColumnGroup.childrenDragEnabled プロパティを false に設定します。単一の列のドラッグを無効にするには、AdvancedDataGridColumn.dragEnabled プロパティを false に設定します。

階層データでのグループ化された列の使用

列グループは、フラットなデータだけでなく、階層データでも使用できます。次の例は、ナビゲーションツリーの個別の列の作成の例を修正したもので、「Revenues」グループ列の下に「Actual」列と「Estimate」列をグループ化しています。

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

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

    <mx:AdvancedDataGrid width="100%" height="100%">
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}"/>
        </mx:dataProvider>
        <mx:groupedColumns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <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>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

AdvancedDataGridColumnGroup クラスのデータフィールドの指定

前の例の列グループでは、AdvancedDataGridColumnGroup クラスのデータフィールドを指定していません。ただし、AdvancedDataGridColumnGroup クラスは、階層データで機能するように設計されています。そのため、AdvancedDataGridColumnGroup クラスのデータフィールドを指定すると、そのデータフィールドのサブフィールドに対する列グループが自動的に作成されます。

次の例では、HierarchicalDataForGroupedColumns.as ファイルによって階層データセットを定義しています。このデータセットでは、Revenues フィールドに Actual および Estimate という 2 つのサブフィールドが含まれています。

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

次の例ではこのデータを使用し、AdvancedDataGridColumnGroup.dataField プロパティの値として Revenues フィールドを指定しています。その結果、次のような出力が作成されます。

AdvancedDataGridColumnGroup.dataField ÉvÉçÉpÉeÉBÇÃílÇýÇµÇƒ Revenues ÉtÉBÅ[ÉãÉhÇšéwíËÇµÇ‹Ç²

この例を実装するコードは次のとおりです。

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

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

    <mx:AdvancedDataGrid id="myADG"
        width="100%" height="100%"
        defaultLeafIcon="{null}">
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}"/>
        </mx:dataProvider>
        <mx:groupedColumns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumnGroup dataField="Revenues">    
                <mx:AdvancedDataGridColumn dataField="Actual"/>
                <mx:AdvancedDataGridColumn dataField="Estimate"/>
            </mx:AdvancedDataGridColumnGroup>    
        </mx:groupedColumns>
   </mx:AdvancedDataGrid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

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

Adobe Flex 3 ヘルプ

列グループの作成

グループでの列のドラッグ & ドロップ

階層データでのグループ化された列の使用

AdvancedDataGridColumnGroup クラスのデータフィールドの指定