更新 ag-grid 中的行数据时列过滤器丢失答案

【问题标题】：Column filter lost when updating row data in ag-grid更新 ag-grid 中的行数据时列过滤器丢失
【发布时间】：2017-12-18 03:35:54
【问题描述】：

我正在尝试在 ag-grid 中预先配置一个列过滤器，一个简单的文本“等于”过滤器以仅显示与某些指定文本匹配的行，我已经完成了这项工作。

但是，一旦我用一组新的行替换模型数据，我的过滤器就会消失。

我已尝试通过 2 种方式更新模型数据：

通过替换绑定的 rowData 属性的值（我使用的是 Vue.js）
调用 api.setRowData(newRows)

这两种情况都会导致列过滤器丢失。

有没有办法在不丢失列过滤器的情况下更新模型数据？

【问题讨论】：

标签： ag-grid

【解决方案1】：

在他们的documentation 中说您可以设置gridOptions 属性deltaRowDataMode=true，然后使用api.setRowData(newRows)。这会将当前行数据与新数据进行比较，以查看发生了什么变化并进行相应更新。如果没有设置此属性，网格会删除所有设置以确保重新开始。

【讨论】：

谢谢，我在发布后不久就找到了这个。为什么列过滤器和行数据应该如此紧密耦合，这仍然让我感到惊讶。我本来希望能够只设置新的行数据并将当前的列过滤器应用于新数据。无论如何，按照文档的建议确实有效，我相信您还必须实现 getRowNodeId 回调。
有时我觉得有趣的是，一个解决方案被如此精确地讨论，以至于它让位于一个非常快速的想法实施。
deltaRowDataMode 自版本 23.1.x 起已弃用。新属性是immutableData，您可以在此处找到文档：ag-grid.com/javascript-grid-immutable-data

【解决方案2】：

我遇到了同样的问题，这是您可以在行数据更新后继续应用数据过滤器。

订阅农业网格的rowDataChanged事件。

(rowDataChanged)="onRowDataChanged($event)"

在 onRowDataChanged 中放置您的过滤逻辑

// Get a reference to the name filter instance
const filterInstance = this.gridApi.getFilterInstance('fieldNameHere');
// Call some methods on Set Filter API that don't apply the filter
filterInstance.setModel({
    type: 'contains', // type of filter
    filter: 'yourData' // set filter on data
});
// Get grid to run filter operation again
this.gridApi.onFilterChanged();

onRowDataChanged 将被触发两次，第一次是在网格清除所有内容时，第二次是在重新加载数据时。所以，你应该设置一些条件来避免任何错误。

例如，我需要从刷新后加载的数据中设置过滤器，这就是我所做的：

const filtered = this.rowData.filter(x => x.Id === this.Id);
if (filtered.length > 0) {
    // Get a reference to the name filter instance
    const filterInstance = this.gridApi.getFilterInstance('fieldNameHere');
    // Call some methods on Set Filter API that don't apply the filter
    filterInstance.setModel({
        type: 'contains', // type of filter
        filter: filtered[0].name // set filter on data
    });
    // Get grid to run filter operation again
    this.gridApi.onFilterChanged();
}

【讨论】：