「table_sort」ライブラリにデータ絞り込み機能を付けたよ

人と話す時に心理学が頭をよぎる、ユゲタです。 僕の好きな対人心理は、「相手の秘密を聞き出すテクニック」です。これは、コンサルティングをする時や、仕事で後輩などに教育をする時などに非常に役立ちます。 ちなみに、この対人心理の方法は、「人の秘密を1個聞き出すには、自分の秘密を10個ぐらい話す」です。 まあまあの確率で相手が心を開いて話してくれますよ。 そして、秘密ではないのですが、以前に作った「table_sort」ライブラリに「データ絞り込み機能」というのを追加してみました。

新機能「データ絞り込み」概要について

以前のバージョンでは、table構成のマトリクスデータを数値や日付の順番に即座にソート処理をして並べ替えてくれるというお便利ライブラリだったのですが、 知り合いからの口頭プルリクにより、「データの絞り込みをしたい」というのがあったので、それをそのまま付け加えてみました。 具体的には、tableデータで、マスター参照する列の値を、任意の値で絞り込みができるようになりました。 例えば、年間の一覧表示がされている場合に「○月」のみを絞り込みたい時とか、家計簿などで「食費」以外は表示させたくない場合などができます。 エクセルを使っている人は、「フィルタ」のような機能だと考えてください。ていうかまんまです。

画面キャプチャ

今回のアップデートで設定を行うと、メニュー部分に、「絞り込みアイコン」が表示されます。 そのアイコンをクリックすると、すぐ下部分に絞り込みをするダイアログが表示されます。 絞り込む文字を入力して、アイコンをクリックするかenterキーを押すと・・・ table内のデータで対象のみが表示されます。 ちなみに、この状態で、通常の昇順、降順の並べ替え機能も実行できます。

設定方法

まずは、headタグ内（body内でもOK）にscriptタグを設置 <script src="table_sort.js"></script> 次に、インスタンス起動で設定オプションをセット。 <script> new $$table_sort({ target_selector : "table", sort : true, refine : true }); </script> "refine:true"で、絞り込み機能が実装されるようになります。 また、"sort:true"の値をfalseにすることで、絞り込み機能のみにすることも可能です。 両方の値をfalseにしないでね。

Githubへのリンク

https://github.com/yugeta/table_sort

参考記事

[Javascript] 簡単にtableタグのソートを行う「table_sort」ライブラリの公開