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

【问题标题】：how to pre-set column filter in ag-grid如何在 ag-grid 中预设列过滤器
【发布时间】：2018-09-02 02:25:34
【问题描述】：

我有一个使用ag-grid 的Ionic/Angular 应用程序。我希望某些网格在加载网格时自动应用过滤器 - 用户无需执行任何操作。

我尝试了以下方法：

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();
}

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

【问题讨论】：

在下面查看我的答案。 firstDataRendered 是你想要的。

标签： ag-grid ag-grid-ng2

【解决方案1】：

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

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

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

    filterComponent.onFilterChanged();
}

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

Pre-onFirstDataRendered 版本：

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

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

【讨论】：

谢谢。但是如果网络很慢，或者有很多行，这并不总是有效，我必须使用 1,000 或更多的超时值，当网格快速加载时，这会让用户感到困惑。所以我在从服务器获取新数据后立即移动了代码。
有没有办法一次设置多个过滤条件？

【解决方案2】：

我最终这样做了。

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

【讨论】：

【解决方案3】：

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

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

newRowsAction：加载新行时要做什么。默认是重置过滤器。如果您想在行加载之间保持过滤器状态，则将此值设置为 'keep'。
This 回答建议设置gridOptions 属性deltaRowDataMode=true
您还可以侦听在网格日期更改时发出的网格事件之一，然后应用过滤器 https://www.ag-grid.com/javascript-grid-events/#miscellaneous: rowDataChanged, rowDataUpdated

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

【讨论】：

【解决方案4】：

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

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

您还可以侦听在网格日期更改时发出的网格事件之一，然后应用过滤器https://www.ag-grid.com/javascript-grid-events/#miscellaneous： rowDataChanged, rowDataUpdated

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

【讨论】：

【解决方案5】：

v24.0.0

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

例如

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

【讨论】：