FlexのDataGridのヘッダーをクリックで「昇順>降順>ソート無効」にするには?
FlexのDataGridは便利で、ほぼプログラミング無しでソートをやってくれる。
ただ一つ問題がある。一度ソート状態にすると、「昇順>降順>昇順>降順・・・」のループに入ってしまい、ソートを無効にすることができない。
ヘッダーをクリックして「昇順>降順>ソート無効」にするにはどうしたらよいか?例えばこうする。
DataGridのHeaderReleaseイベントを取得してDataGridColumn.sortDescendingフラグで昇順降順を判断する。
降順の時にソートを無効にする。このときArrayCollection.refresh()することが重要。
また、ArrayCollectionのソートを変更したからといってDataGridColumn.sortDescendingフラグが自動的に変わるわけではないので、これを手動で設定する。こうしないと、ヘッダーをクリックしても降順から昇順へ変わらない。
追記10.11.22:実際に動くサンプルを作りました。サンプルを右クリックでソースを見られます。
http://dl.dropbox.com/u/181116/swf/DataGridSortTest/DataGridSortTest.html
ただ一つ問題がある。一度ソート状態にすると、「昇順>降順>昇順>降順・・・」のループに入ってしまい、ソートを無効にすることができない。
ヘッダーをクリックして「昇順>降順>ソート無効」にするにはどうしたらよいか?例えばこうする。
/** * データグリッドヘッダークリック時 * @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
お邪魔させていただきます。
返信削除この記事を参考にしてソートのロジックを組んだのですが、どうもグリッドのヘッダーの矢印が evt.preventDefault(); の影響で消えてしまうようです。
じゅんころさんはどうやって矢印を再表示させているのかな~と思ってコメントさせていただきました。
もし、宜しければ教えてください。
確か特別なことはしていなかったと思うのですが、もしかするとコードが間違っているのかもしれないと思い、確認のため実際に動くサンプルを作りました。
返信削除そのサンプルのリンクを本文の最後に追記しました。右クリックからソースをダウンロードできるようにもなっていますので、参考にしていただければ幸いです。
匿名でコメントさせていただいたものです。
返信削除迅速な対応をしていただいたのに、こちらからの確認が遅れてしまって申し訳ないです・・・。
特に問題がなく動いているようですね。
こちらでソースを見てみて色々検証してみたいと思います。
また、何かありましたら質問させてください!!
丁寧な対応ありがとうございます!!
お役に立てたようでうれしいです(^^)
返信削除私もネットで見も知らない人々に何度となく助けられました。
まさにVIVA THE INTERNET!インターネットはすばらしい。