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

コメント

  1. お邪魔させていただきます。
    この記事を参考にしてソートのロジックを組んだのですが、どうもグリッドのヘッダーの矢印が evt.preventDefault(); の影響で消えてしまうようです。
    じゅんころさんはどうやって矢印を再表示させているのかな~と思ってコメントさせていただきました。
    もし、宜しければ教えてください。

    返信削除
  2. 確か特別なことはしていなかったと思うのですが、もしかするとコードが間違っているのかもしれないと思い、確認のため実際に動くサンプルを作りました。

    そのサンプルのリンクを本文の最後に追記しました。右クリックからソースをダウンロードできるようにもなっていますので、参考にしていただければ幸いです。

    返信削除
  3. 匿名でコメントさせていただいたものです。
    迅速な対応をしていただいたのに、こちらからの確認が遅れてしまって申し訳ないです・・・。

    特に問題がなく動いているようですね。
    こちらでソースを見てみて色々検証してみたいと思います。
    また、何かありましたら質問させてください!!

    丁寧な対応ありがとうございます!!

    返信削除
  4. お役に立てたようでうれしいです(^^)

    私もネットで見も知らない人々に何度となく助けられました。

    まさにVIVA THE INTERNET!インターネットはすばらしい。

    返信削除

コメントを投稿

このブログの人気の投稿

レオナルド・ダ・ビンチはなぜノートを「鏡文字」で書いたのか?

macでsmb(samba)共有サーバーに別名で接続(別アカウント名で接続)する方法

Google DriveにCURLでアップロードするには?