Wijmo FlexGridFilterで画面ロードと同時に絞り込む方法

JavaScript

FlexGridFilterの適用は公式ページに記載してある通り
とってもカンタンです　たったの1行でフィルターの設定が完了します

let theGrid = new FlexGrid('#theGrid');
let filter = new FlexGridFilter(theGrid); // この行がフィルター設定

今回はこのフィルターを設定した際
予めデータを絞り込んだ状態で表示されるような設定を入れてみます

前提

  • Wijmo ver. 5.2
  • jQuery ver. 3.6

実現したい挙動の確認

下図のようなグリッドに対して
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),
  });

▼実際に動作する画面のサンプル

ではでは