将列标题过滤器保存在ag-grid中

Question

我正在开发一个现有的应用程序，在这个应用程序中，他们使用了ag-grid库来处理他们应用程序中的大多数网格。现在ag-grid通过使用列标题中的filter选项，提供了基于列值过滤网格的功能。我给了一个链接https://www.ag-grid.com/angular-data-grid/filtering-overview/。我想实现一个功能，在这个功能中，我们可以保存用户正在搜索的过滤器关键字，当他返回到同一个网格时，前面的过滤器已经应用了。例如https://plnkr.co/edit/?p=preview&preview，这里我们可以选择运动员，并通过到列中搜索一个值进行过滤，所以我想要的是，如果我搜索'abc'，我应该能够保留这个值。有办法做到吗?我给上面的链接指定了colDef

this.columnDefs = [
{ field: 'athlete' },
{
field: 'age',
filter: 'agNumberColumnFilter',
maxWidth: 100,
},
{
field: 'date',
filter: 'agDateColumnFilter',
filterParams: filterParams,
},
{
field: 'total',
filter: false,
},
];
this.defaultColDef = {
flex: 1,
minWidth: 150,
filter: true,
};
}

任何帮助都是感激的，谢谢:)

Answer 1

您可以保存使用Grid EventonFilterChanged应用的过滤器。在这里，你可以通过调用api.getFilterModel()来获得filterModel。在下面的plunkr中，我们通过将过滤器模型保存到本地存储并通过在Grid EventonFirstDataRendered中应用它来恢复它来展示这一点

onFilterChanged(params) {
const filterModel = params.api.getFilterModel();
localStorage.setItem('filterModel', JSON.stringify(filterModel));
}
onFirstDataRendered(params) {
const filterModel = JSON.parse(localStorage.getItem('filterModel'));
if (filterModel) {
params.api.setFilterModel(filterModel);
}
}

参见下面的plunkr

您可能还会发现以下文档页面相关:

保存和恢复过滤器模型

电网事件

Answer 2

要将现有过滤器应用于ag-grid，可以通过在gridApi上设置filterModel来实现。

gridApi.getFilterInstance("fieldName").setModel({
"filterType":"equals", //type of filter condition
"type":"text", //Type of column [text/number/date]
"filter":"value" //Value need to be applied as filter.
})

与onFilterChanged事件类似，您可以捕获更改并动态应用过滤器。