web-dev-qa-db-ja.com

ag-gridで列フィルターを事前設定する方法

Ionic/Angularを使用するag-gridアプリがあります。特定のグリッドに、ユーザーが何もしなくても、グリッドのロード時にフィルターが自動的に適用されるようにしたいと思います。

私は次を試しました:

onGridReady(params) {
  params.api.sizeColumnsToFit();
  // get filter instance
  var filterComponent = params.api.getFilterInstance("isActive");
  // OR set filter model and update
  filterComponent.setModel({
    type: "greaterThan",
    filter: 0
  });
  filterComponent.onFilterChanged();
}

しかし、それは何もしませんでした。何か案は?

9
user2429448

いくつかの例のプランクで問題を再現しましたが、わずかな遅延を追加することで軽減されたようです。グリッドは準備できていますが、DOMがまだ完全に準備が整っていない可能性があると推測してみてください。

修正:

onGridReady(params) {
params.api.sizeColumnsToFit();

setTimeout(() => {
    var filterComponent = params.api.getFilterInstance("isActive");
    filterComponent.setModel({
      type: "greaterThan",
      filter: 0
    });
    filterComponent.onFilterChanged();
    },150)
}
6
playtoh

結局これをやった。

var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved')  //added the option i wanted
FilterComponent.onFilterChanged();   
5
user9915241

問題は、新しい行が読み込まれるとグリッドがフィルターをリセットすることだと思います。これにアプローチする方法は複数あります。

  1. 事前定義されたフィルタータイプには、newRowsActionというフィルターパラメーターがあります
    https://www.ag-grid.com/javascript-grid-filter-text/#params

    newRowsAction:新しい行がロードされたときの処理。デフォルトでは、フィルターをリセットします。行のロード間でフィルターステータスを保持する場合は、この値を「keep」に設定します。

  2. これ 答えはgridOptionsプロパティdeltaRowDataMode=true

  3. グリッドの日付が変更されたときに発行されるグリッドイベントの1つをリッスンしてから、フィルターを適用することもできます https://www.ag-grid.com/javascript-grid-events/#miscellaneousrowDataChanged, rowDataUpdated

これらはすべて、データが変更されたときにフィルターを保持する必要がありますが、最初のロードでのみフィルターを使用する場合は、少し追加のロジック(フラグを設定)が必要だと思います。

1
Fabian