Ag-grid React：无限行模型的数据源中的预设过滤器答案

【问题标题】：Ag-grid React: Pre-set Filters in Datasource for Infinite Row ModelAg-grid React：无限行模型的数据源中的预设过滤器
【发布时间】：2020-06-22 10:00:23
【问题描述】：

使用无限行模型，带有排序和过滤功能。

根据文档，我已经从服务器端处理了排序和过滤。每次我更改排序/过滤模型时都会调用数据源。但是我无法为其首次加载到网格中时预设过滤器模型。无法将初始过滤器模型发送到服务器。

const dataSource = {
            rowCount: null,
            getRows: params => {
                    const sortedFilteredData = requestRows(data, params.sortModel, params.filterModel);
                    const rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
                    const lastRow = -1;
                    if (dataAfterSortingAndFiltering.length <= params.endRow) {
                        lastRow = dataAfterSortingAndFiltering.length;
                    }
                    params.successCallback(rowsThisPage, lastRow);
            }
        };

第一次调用数据源时，filterOptions 为 {}。

我尝试使用 api.setFilterModel() 在 onGridReady() 设置模型，但它会抛出错误，我们可以使用 setFilterModel 和无限行模型类型。

【问题讨论】：

标签： ag-grid ag-grid-react

【解决方案1】：

我不确定您使用的是哪个版本的 ag-grid，但您可以初始化过滤器，但问题是这样做时它将对您的数据源进行 2 次调用。从 v20.0 升级到 v23.1 后，我开始遇到这种情况。代码如下所示：

    // InitialFilter is just a prop I pass into my grid
    InitialFilter: (params) => {
        let filterComponent = params.api.getFilterInstance("<Your Field Name>");
        filterComponent.setModel({
            type: "greaterThan",
            filter: 0
        });
        params.api.onFilterChanged();
    }

我在我的 onGridReady 函数中设置了这个：

    onGridReady(params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;

        // initialFilter prop is set here
        if (this.props.initialFilter) {
          this.props.initialFilter(params);
        }
        params.api.setServerSideDatasource(this.dataSource(params));
    }

此外，升级到 23.1.0 后，如果您在同一字段上进行过滤，则在其上设置初始过滤器将对您的数据源进行 2 次调用。有一个已发布的打开GitHub Issue 1785，但随后关闭。其他人提供了解决方法，但它们都在 Angular 中，所以我试图弄清楚如何在 React 中做到这一点。希望这会有所帮助，如果您在 React 中找到解决方法，请告诉我。 :)

【讨论】：