DataGrid コントロール

DataGrid コントロールは、複数列のデータを表示できるリストです。フォーマットされたデータのテーブルで、編集可能なテーブルセルを設定できます。また、数多くのデータ駆動アプリケーションの基盤となります。

高度なデータグリッドコントロールを作成する際には、次の情報が重要になります。参照してください。

各 DataGrid セルの情報に形式を設定する方法と、ユーザーがどのようにセルにデータを入力するかを制御する方法については、アイテムレンダラーとアイテムエディタの使用を参照してください。
データグリッドの内外にオブジェクトをドラッグする方法については、ドラッグ＆ドロップの使用を参照してください。

詳細については、『Adobe Flex リファレンスガイド』を参照してください。

DataGrid コントロールについて

DataGrid コントロールには次の機能があります。

サイズ変更可能、ソート可能、カスタマイズ可能な列レイアウト（非表示設定可能な列を含む）
オプションのカスタマイズ可能な列ヘッダーおよび行ヘッダー（オプションで折り返すヘッダーテキストを含む）
実行時にユーザーがサイズおよび順序を変更できる列
選択イベント
すべての列でカスタムアイテムレンダラーを使用可能
データのページ表示をサポート
スクロール不可のロックされた行および列

次の図は DataGrid コントロールを示しています。

DataGrid ÉRÉìÉgÉçÅ[Éã

行には、アイテムが表示されます。各行は、前の行の下にレイアウトされます。列では、制御されている幅、色、サイズなど各表示列の状態が維持されます。

DataGrid コントロールの作成

DataGrid コントロールを MXML で定義するには、<mx:DataGrid> タグを使用します。MXML の他の場所（別のタグまたは ActionScript ブロック）のコンポーネントを参照する場合は、id 値を指定します。

DataGrid コントロールではリストデータプロバイダを使用します。詳しくは、データプロバイダおよびコレクションの使用を参照してください。

DataGrid コントロールのデータは、dataProvider プロパティで指定します。データは様々な方法で指定できます。DataGrid コントロールを作成する最も簡単な方法では、<mx:ArrayCollection> とともに <mx:dataProvider> プロパティのサブタグを使用し、<mx:Object> タグも使用して、オブジェクトの ArrayCollection として項目を定義します。次の例のように、各オブジェクトで DataGrid コントロールの行を定義し、オブジェクトのプロパティで行内の列項目を定義します。

<?xml version="1.0"?>
<!-- dpcontrols/DataGridSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:DataGrid> 
      <mx:ArrayCollection>
         <mx:Object>
            <mx:Artist>Pavement</mx:Artist>
            <mx:Price>11.99</mx:Price>
            <mx:Album>Slanted and Enchanted</mx:Album>
         </mx:Object>
         <mx:Object>
            <mx:Artist>Pavement</mx:Artist>
            <mx:Album>Brighten the Corners</mx:Album>
            <mx:Price>11.99</mx:Price>
         </mx:Object>
      </mx:ArrayCollection>
   </mx:DataGrid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例は、MXML のデフォルトを活用する方法を示しています。dataProvider は DataGrid コントロールのデフォルトのプロパティなので、<mx:dataProvider> タグを使用する必要はありません。同様に、source は ArrayCollection クラスのデフォルトのプロパティなので、<mx:ArrayCollection> タグ内で <mx:source> タグを使用する必要はありません。最後に、ソース配列に <mx:Array> タグを指定する必要もありません。

しかし、次の例のように、オブジェクトのタグで直接プロパティを使用してオブジェクトを定義することもできます。

<?xml version="1.0"?>
<!-- dpcontrols/DataGridSimpleAttributes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:DataGrid> 
      <mx:ArrayCollection>
         <mx:Object Artist="Pavement" 
            Album="Slanted and Enchanted" Price="11.99" />
         <mx:Object Artist="Pavement" 
            Album="Brighten the Corners" Price="11.99" />
      </mx:ArrayCollection>
   </mx:DataGrid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

DataGrid コントロールに表示される列名は、配列オブジェクトのプロパティ名です。デフォルトでは、列はプロパティ名のアルファベット順に表示されます。異なるオブジェクトには異なる順序でプロパティを定義することができます。プロパティが省略されている配列オブジェクトがある場合、DataGrid コントロールでは、その配列オブジェクトに対応する行に空のセルが表示されます。

列の指定

DataGrid コントロール内の各列は、DataGridColumn オブジェクトで表されます。DataGrid コントロールの columns プロパティと <mx:DataGridColumn> タグを使用して、DataGrid の列の選択、表示列の順序の指定、および他のプロパティの追加設定が可能です。また、列の表示と非表示の説明にあるように、DataGridColumn クラスの visible プロパティを使用すれば列を非表示にしたり再表示したりできます。

<mx:DataGridColumn> タグについて詳しくは、『Adobe Flex リファレンスガイド』の「DataGridColumn」を参照してください。

次の例のように、<mx:DataGrid> タグの子タグ <mx:columns> で配列エレメントを指定します。

<?xml version="1.0"?>
<!-- dpcontrols/DataGridSpecifyColumns.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
   <mx:DataGrid> 
      <mx:ArrayCollection>
         <mx:Object Artist="Pavement" Price="11.99" 
            Album="Slanted and Enchanted" />
         <mx:Object Artist="Pavement" 
            Album="Brighten the Corners" Price="11.99" />
      </mx:ArrayCollection>
      <mx:columns>
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn dataField="Price" />
      </mx:columns>
   </mx:DataGrid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例で DataGrid コントロールに表示される列は、Album および Price だけです。次の例のように、列の順序を変更することもできます。

<mx:columns>
    <mx:DataGridColumn dataField="Price" />
    <mx:DataGridColumn dataField="Album" />
</mx:columns>

この例では、DataGrid コントロールの 1 列目として Price 列、2 列目として Album 列を指定しています。

<mx:DataGridColumn> タグを使用すると、この他のオプションを設定することもできます。次の例では、headerText プロパティを使用して列の名前をデフォルト名の Album とは異なる値に設定し、width プロパティを使用してアルバム名の列を完全なアルバム名が表示できる幅に設定します。

<mx:columns>
    <mx:DataGridColumn dataField="Album" width="200" />
    <mx:DataGridColumn dataField="Price" headerText="List Price" />
</mx:columns>

列の表示と非表示

列を場合によって表示したり非表示にしたりするには、DataGridColumn クラスの visible プロパティを指定します。次の例では、ボタンをクリックすることでアルバムの価格を表示したり非表示にしたりできます。

<?xml version="1.0"?>
<!-- dpcontrols/DataGridVisibleColumn.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
   <mx:DataGrid id="myDG" width="350"> 
      <mx:dataProvider>
         <mx:ArrayCollection>
            <mx:source>
               <mx:Object Artist="Pavement" Price="11.99" 
                  Album="Slanted and Enchanted" />
               <mx:Object Artist="Pavement" 
                  Album="Brighten the Corners" Price="11.99" />
            </mx:source>
         </mx:ArrayCollection>
      </mx:dataProvider>
      <mx:columns>
         <mx:DataGridColumn dataField="Artist" />
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn id="price" dataField="Price" visible="false"/>
      </mx:columns>
   </mx:DataGrid>

   <!-- The column id property specifies the column to show.-->
   <mx:Button label="Toggle Price Column" 
      click="price.visible = !price.visible;" />
</mx:Application> 
前の例で実行する SWF ファイルは以下のとおりです。

DataGrid コンテナへのデータの受け渡し

Flex では、ActionScript の変数定義または Flex のデータモデルから DataGrid コントロールを作成できます。次の例では、変数を使用して DataGrid コントロールを作成しています。

<?xml version="1.0"?>
<!-- dpcontrols/DataGridPassData.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   initialize="initData()">
   <mx:Script>
   <![CDATA[
      import mx.collections.*;
      private var DGArray:Array = [
         {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
         {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}];
         
      [Bindable]
      public var initDG:ArrayCollection;
      //Initialize initDG ArrayCollection variable from the Array.
      //You can use this technique to convert an HTTPService, 
      //WebService, or RemoteObject result to ArrayCollection.
      public function initData():void {
         initDG=new ArrayCollection(DGArray);
      }
   ]]>
   </mx:Script>

   <mx:DataGrid id="myGrid" width="350" height="200" 
      dataProvider="{initDG}" >
      <mx:columns>
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn dataField="Price" />
      </mx:columns> 
   </mx:DataGrid>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、変数 initDG を <mx:dataProvider> プロパティにバインドしています。また、データバインディングを使用する場合は、列定義イベントを指定することもできます。モデルをデータプロバイダとして使用する方法については、変数とモデルを使用した ComboBox コントロールの作成を参照してください。

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

Adobe Flex 3 ヘルプ

DataGrid コントロール

DataGrid コントロールについて

DataGrid コントロールの作成

DataGrid コンテナへのデータの受け渡し