2010年6月22日火曜日

FlexのDataGridのヘッダーをクリックで「昇順>降順>ソート無効」にするには?

FlexのDataGridは便利で、ほぼプログラミング無しでソートをやってくれる。

ただ一つ問題がある。一度ソート状態にすると、「昇順>降順>昇順>降順・・・」のループに入ってしまい、ソートを無効にすることができない。

ヘッダーをクリックして「昇順>降順>ソート無効」にするにはどうしたらよいか?例えばこうする。

/**
 * データグリッドヘッダークリック時
 * @param evt
 * 
 */
private function onHeaderReleaseDataGrid(evt:DataGridEvent):void {
 
  //ヘッダーがクリックされた列を取得
  var col:DataGridColumn = dataGrid.columns[evt.columnIndex];
  trace("onHeaderReleaseDataGrid() ソート変更 sortDescending=" + col.sortDescending);

  //降順でソートされているなら
  if (col.sortDescending) {

    //デフォルト動作を停止
    evt.preventDefault();

    //ソートフラグをOFFにする
    col.sortDescending = false;

    //データプロバイダ取得
    var ac:ArrayCollection = dataGrid.dataProvider as ArrayCollection;

    //ソートを無効にする
    ac.sort = null;

    //配列を更新する(ここ重要!)
    ac.refresh();
 
    trace("onHeaderReleaseDataGrid() ソートを無効にしました");

  }
 
}

DataGridのHeaderReleaseイベントを取得してDataGridColumn.sortDescendingフラグで昇順降順を判断する。

降順の時にソートを無効にする。このときArrayCollection.refresh()することが重要。

また、ArrayCollectionのソートを変更したからといってDataGridColumn.sortDescendingフラグが自動的に変わるわけではないので、これを手動で設定する。こうしないと、ヘッダーをクリックしても降順から昇順へ変わらない。


追記10.11.22:実際に動くサンプルを作りました。サンプルを右クリックでソースを見られます。
http://dl.dropbox.com/u/181116/swf/DataGridSortTest/DataGridSortTest.html