2009年09月28日

Flex開発 初心者の頃欲しいシリーズ?【DataGridのソートを制御する】

開発部だより 第70回


こんにちは、シルバーウィークをゴールデンウィークにしてしまったたっくんです。

今回は、Flexで良く使う、『 DataGrid 』のカスタマイズ(かゆいところに手が届く?)をご紹介します。

データグリッドの列ソート機能をカスタマイズ


・データグリッド全体をソート無効にする
・データグリッドの特定の列をソート無効にする
・オリジナルのソートをさせる

・データグリッド全体をソート無効にする
 データグリッド全体をソート無効にする場合は、<DataGrid>の「sortableColumns プロパティ」を変更します。

<mx:DataGrid dataProvider="{sampleAC}" sortableColumns="false">

</mx:DataGrid>


・データグリッドの特定の列をソート無効にする
 特定の列のソート無効にする場合は、<DataGridColumn>の「sortable プロパティ」を変更します。

<mx:DataGrid dataProvider="{sampleAC}">
 <mx:columns>
  <mx:DataGridColumn headerText="国" dataField="Country" sortable="false"/>
 </mx:columns>
</mx:DataGrid>


・オリジナルのソートをさせる
デフォルトのソートイベントを止めて、自分で書いた処理を実行する。
<DataGrid> の headerReleaseで、自分で作ったメソッドを呼び、ソート処理を行なう。
※ポイント
単純に、処理を書くと、「デフォルトの動作+自分で設定した動作」と2重の処理が行なわれてしまうので、preventDefault()メソッドを使い、デフォルトのソートを実行しないようにします。

<mx:DataGrid dataProvider="{sampleAC}" headerRelease="headerReleaseHander(event);">

</mx:DataGrid>

--Scriptタグ中-----
//データグリッドの自動ソート機能を無効化
private function headerReleaseHander( event:DataGridEvent ):void{
 event.preventDefault();
 //ここにカスタムソート処理を書く
}


データグリッドは、表形式の情報を取り扱うので、非常に使いやすいため、いろんなところで使うと思います。ソート機能も便利ですが、必要ない場合もあるかと思いますので、ちょっと紹介させていただきました。

特に、最後に紹介した「オリジナルのソートをさせる」での、preventDefault()メソッドで、イベントを中断する方法は、他のコンポーネントとかでも使えますので、覚えておくといいですよ!

ではでは
posted by たっくん at 12:09
開発部だより | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック