时间戳

首页 > 解决方案 > Ag-grid React：无限行模型的数据源中的预设过滤器

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

问题描述

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

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

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-gridag-grid-react

解决方案

我不确定您使用的是哪个版本的 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 问题 1785，但随后关闭。其他人提供了解决方法，但它们都在 Angular 中，所以我试图弄清楚如何在 React 中做到这一点。希望这会有所帮助，如果您在 React 中找到解决方法，请告诉我。:)

推荐阅读