FlexGridFilterの適用は公式ページに記載してある通り
とってもカンタンです たったの1行でフィルターの設定が完了します
let theGrid = new FlexGrid('#theGrid');
let filter = new FlexGridFilter(theGrid); // この行がフィルター設定
今回はこのフィルターを設定した際
予めデータを絞り込んだ状態で表示されるような設定を入れてみます
前提
実現したい挙動の確認
下図のようなグリッドに対して
product列を予め「Cars」と「Computures」に絞りたいと思います
下図のように、最初から絞り込まれているイメージです
実現方法
ドキュメントを確認
やりたいことをイメージできたので、実際にどのようにこれを実装すればよいのかを考えましょう
まずは公式ページを確認してみましょう それらしいものが書いてあります
はい、書いてはあるものの
どのように使えば良いのか、さっぱりわかりません
わからないので、実際に動いているソースに教えてもらいましょう
ソースを確認
FiddleでFlexGridFilterを動作させ、実際にフィルター条件を有効にした状態で
さっき見つけた FilterDefinition に何が設定されているのか?を確認しますJSON.parse(filter.filterDefinition);
で定義を出力したのが↓です
ここでミソになりそうなのは以下のプロパティ
- binding: フィルターを適用するカラムのbindingを設定
- exclusiveValueSearch: 条件を適用して表示する設定
- showValues: 表示対象の値を設定
- type: value値に条件を適用する設定
実装方法を確認
- filterDefinition を使用する
- filterDefinition にはjson文字列を指定する
- json文字列で設定する項目も判明した
ここまで来たら、あとは動作するように実装するだけです
もう一度、公式ページを確認してみましょう
constructor で options を受け付けています
このoptionsにはプロパティ群が設定可能となっているので
描画時にフィルターを有効にするならここで設定しましょう
最終形態
これまで調べてきた情報をまとめて実装します
↓のコードで描画と同時にフィルターを有効化できます
let param = {
defaultFilterType: 3,
filters: [{
binding: 'product',
exclusiveValueSearch: true,
showValues: {
'Cars': true,
'Computers': true,
},
type: 'value',
}]
};
filter = new wijmo.grid.filter.FlexGridFilter(theGrid, {
filterDefinition: JSON.stringify(param),
});
▼実際に動作する画面のサンプル
ではでは