如何在 ag-grid 中预设列过滤器

Question

我有一个 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();
}

但它什么也没做。有什么想法吗？

Answer 1

编辑： AgGrid 在 24.0 版中包含一个 onFirstDataRendered 回调，如后面的评论所述。下面的原始答案现在仅与 pre-date 此功能的版本相关。

onFirstDataRendered(params) {
    var filterComponent = params.api.getFilterInstance("isActive");

    filterComponent.setModel({
        type: "greaterThan",
        filter: 0
    });

    filterComponent.onFilterChanged();
}

在他们的几个 ~~example~~ 较旧的 plunks 中重现了您的问题，似乎可以通过添加一个小的延迟来缓解。只是冒险猜测也许 DOM 还没有完全准备好，尽管网格已经准备好了。

Pre-onFirstDataRendered 版本：

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

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

Answer 2

我认为问题在于，加载新行时网格会重置过滤器。有多种方法可以解决这个问题：

预定义过滤器类型有一个名为 newRowsAction
的过滤器参数 https://www.ag-grid.com/javascript-grid-filter-text/#params

newRowsAction: What to do when new rows are loaded. The default is to reset the filter. If you want to keep the filter status between row loads, then set this value to 'keep'.
答案建议设置 gridOptions 属性 deltaRowDataMode=true
您还可以监听网格日期更改时发出的网格事件之一，然后应用过滤器 https://www.ag-grid.com/javascript-grid-events/#miscellaneous: rowDataChanged, rowDataUpdated

这些都应该在数据更改时保留过滤器，但我认为如果您只想在第一次加载时使用过滤器，您仍然需要一些额外的逻辑（设置标志）。

Answer 3

我最终做到了。

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

Answer 4

就我而言，我需要在加载网格时恢复 Ag-Grid 的设置过滤器。受已接受答案的启发，我的理解是过滤器实例 api 只能在网格数据准备就绪（不是 gridReady）后访问，因为它需要聚合行数据以填充其过滤器列表。

因此，正如#3 在@Fabian 的回答中建议的那样，我在行数据更改时设置了事件侦听器。

You can also listen to one of the grid events that are emitted when the grid date changes and then apply the filter https://www.ag-grid.com/javascript-grid-events/#miscellaneous: rowDataChanged, rowDataUpdated

在类似的用例中，我认为这是一种比在访问过滤器实例之前设置任意超时数更好的方法，因为它可能会导致不一致的结果。

Answer 5

v24.0.0

实现这一点的最佳方法是在 firstDataRendered 回调中应用默认过滤器。

例如

onFirstDataRendered(params) {
   //... apply your default filter here
}

如何在 ag-grid 中预设列过滤器

how to pre-set column filter in ag-grid

ag-grid

ag-grid-ng2