【Angular】Pipeを使ったorder byを実装

order byの実装

order by(ソート)の実装をしてみた。
github
demo

SQLで言うところ

  • order by hoge1 (ASC|DESC)
  • order by hoge1 (ASC|DESC) , hoge2 (ASC|DESC)

の機能を提供する
SQLの場合、order by hoge1 (ASC|DESC)でhoge1の値が同一の場合でも並び順が内部のIDによって統一されるが、Angular(というよりjs?)の場合だと並び順が統一されないためhoge1が同一だった場合のためにhoge2まで見るようにした。引数を可変化して実質無制限にしようと思ったが、そこまでする必要も無いかなと妥協したのは内緒。

実装方法

ソースは下記に記載してある

  • order-by.pipe.tsの実装
  • DI(依存性注入)

order-by.pipe.tsの実装

好きな場所にコピペすれば良い。

DI(依存性注入)

大体app.module.tsと言うファイル名になる。import文の追加とdeclarationsに宣言を追加する

使い方

  • コンポーネントでOrderByParamの実装
  • HTML部分にpipeの宣言

コンポーネントでOrderByParamの実装

OrderByParamクラスをグローバルエリアに実装する。OrderByParam.set(‘ソートするカラム名’,’並び順’)でソートを実行される。
click時にsort関数を発火させることによりOrderByParam.setを実装させる。引数となるカラム名はclickイベントから持ってくるとする。

HTML部分にpipeの宣言

order by の対象にパイプ宣言を行う

非同期の場合

サンプルではデータをハードコーディングしているが、もし非同期系(rx.js-observerなど)の場合、asyncをorderByの前に宣言すればよい。

nullを最小値にしたい場合

nullは無限大数(すっごく大きい値)となり、降順ソートした場合は一番上に、昇順ソートした場合は一番下に来てしまう。
場合によって逆にしたい場合もあるだろうと思いnullHandlingMin関数を作成してある。元に戻したいときはnullHandlingMax関数を使用する。

スポンサーリンク
レタリング(大)広告
レタリング(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レタリング(大)広告