開発部だより 第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()メソッドで、イベントを中断する方法は、他のコンポーネントとかでも使えますので、覚えておくといいですよ!
ではでは