igGridのリモートデータソースに任意のフィルタリングを追加する

igGridをリモートURLをデータソースとして構成している環境で、任意のフィルタリング条件を追加する方法を考えてみました。

通常のフィルタリング

igGridFilteringの機能を設定すると、グリッド上の列ヘッダのあたりに、対象列にフィルタ条件を設定するためのUIが表示されます。

デフォルトで、等しいとかより大きい、などの条件があります(用意されている条件は、デフォルトフィルタリング条件を参照)。入力はドロップダウンリストで条件を指定し、フィルタリングに使う値をテキストボックスやカレンダー(列の型によって違います）で入力です。

ここにない条件は、カスタム条件(customConditionsに関数や表示フォーマットなどを指定できる)を作成することも可能です。

開発者ツールで確認すると、データソースがリモートの場合、ユーザが画面上で指定した条件は、クエリストリングに「filter(列のキー)=条件(値)」形式で追加されてきました。

おそらくigGridの仕様だと思うのですが、列の型指定と合わない値は、フィルタリングでも入力できないようです。

例えば、numberとして指定した列のフィルタリング値として日本語を入力しても入力が終わった途端に消されてしまいます。想定としては、マスター参照しているid列に対して、参照先のマスタが持っている日本語名称でフィルタしたいような場合になります。

igGridFilteringもダイアログ表示を持っていますが、グリッド上の列に対するフィルタと同じような制限がありそうでした。

考えたのは、

通常のフィルタに対応する機能はすでに作成済みでした。

「filter(列のキー)=条件(値)」指定を解析して検索条件に展開するロジックが実装済みだったのでこれを拡張して新しいフィルタ条件(デフォルト条件equalsとかと衝突しない名前にする)を検索条件に展開するように変更。

マスタ参照用に表示している列数分だけigTextEditorを並べます。

適用するときには、入力した条件を「filter(列のキー)=条件(値)」の文字列に変換して、&で結合。さらにこれを、もともとのDataSourceのURLに結合して、データソースに設定します。

$('セレクタ').igGrid('dataSourceObject', URL);
$('セレクタ').igGrid('dataBind');

クリアするときのことを考えてもともとのDataSourceのURLはどこかに保存しておく必要がありますね。

試してみたときはdataBindしないと反映されませんでした。