Question

我在网格的列上有一个自定义过滤器组件。我注意到在单击列标题中的过滤器图标之前，不会构造过滤器组件。这意味着不会根据我的默认设置过滤数据（例如，过滤掉status == StatusEnum.Complete处的记录）。

作为一种解决方法，我发现可以通过调用onGridReady在api.getFilterInstance('status')事件中获取过滤器实例，这将导致创建过滤器组件，从而应用默认过滤。 / p>

此解决方法似乎有些笨拙。 filter事件中未使用onGridReady变量，这会在IDE /构建中引发警告。认为没有必要，另一位开发人员可能会删除这行代码。

是否有更好的方法在创建网格时强制实例化我的自定义过滤器？我正在使用AgGrid 17.1和Angular 4.4。

网格的配置如下：

gridOptions: GridOptions = {
    enableFilter: true,
    onGridReady: (event) => {
        let filter = event.api.getFilterInstance("status"); // forces the filter component to be constructed
        let data = this.loadAsyncData();
        event.api.setRowData(data);
    },
    columnDefs: [
    ...
    {
        headerName: "Status",
        field: "status",
        filterFramework: MyCustomStatusFilterComponent,
        filterParams: {
            valueGetter: (obj) => { return obj.data.statusEnum; },
            hideCompleteByDefault: true,
            ...
        }
    },
    ....
    ]
}

我已经设置了example that demonstrates the issue。请注意app.component.ts第63行上的“ hack”。

Answer 1

首先-这是两个独立的东西，自定义过滤器和过滤器初始化。

我想您已经将这两个阶段混合在一起，并试图获得意想不到的结果。

您的自定义过滤器不应包含预定义的逻辑因为只有先触摸过滤器，才会出现init，您必须先划分逻辑，然后在{{1} }，您可以执行onGridReady所需的操作。或者像您已经提到的那样进行黑客入侵

Answer 2

核心问题是默认情况下您要与过滤器组件的工作方式作斗争。 Ag-grid付出了大量努力来按需创建过滤器GUI（单击列过滤器图标时）。这是为了避免在网格启动时（如果您有100列）使100个不同的过滤器组件无意义地初始化自身的性能问题。

如果要保留过滤器设置（将“完整”过滤掉）在内部，请保留您的自定义过滤器组件。我怀疑那里还有更好的技巧。

但是，您实际上应该做的是将过滤条件移至自定义过滤器组件的外部。想象一下，如果您有其他页面，则默认情况下要在“状态”列上进行不同的过滤。用您当前的设计来做到这一点将很棘手。

您的代码应更像这样：

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

    // hack to get default filtering
    //params.api.getFilterInstance('status');

    params.api.setRowData(this.rowData);

    // apply filter model
    // use same filter model that enterprise set filter uses, since your filter is similar
    params.api.setFilterModel({
        status: {
            filterType: 'customStatusFilter',
            values: ['New', 'Working on it'],
        },
    });

    params.api.sizeColumnsToFit();
}

当然，要使用此功能，您将必须实质性地重写自定义过滤器组件。我可以这样做，但是花了太长时间，而且我真的不了解Angular，所以我按原样提交了答案。如果您尝试在现有的实现基础上进行构建（或将其与其他ag-grid功能混合使用），则会导致很多问题。

也许这些链接会有所帮助：

Answer 3

这里使用自定义过滤，

如果您的行未绑定值，则您使用自定义过滤。

         {
            headerName: "Date",
            field: "date",

            //Custom  Filter Start

            filterValueGetter: (params: ICellRendererParams) => 
            {
              if (this.transactionIsEmpty(params.data)) 
              {
                const tx: Transaction = params.data;
                return moment(tx.date).format('DD-MM-YYYY');
              }
            },

            //Custom  Filter End

            cellStyle: { 'text-align': 'left' },
            minWidth: 250,
        }

直到交互才创建AgGrid自定义过滤器

3 个答案: