3

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

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

这种解决方法似乎有点笨拙。该filter变量在事件中未使用onGridReady，这会导致 IDE / build 中出现警告。另一个开发人员可能会过来删除这行代码，认为这是不必要的。

是否有更好的方法可以在创建网格时强制实例化我的自定义过滤器？我正在使用 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,
            ...
        }
    },
    ....
    ]
}

我已经设置了一个示例来演示该问题。注意第 63 行的“hack” app.component.ts。

4

3 回答 3

3

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

我想你已经混合了这两个阶段并试图达到一个意想不到的结果。

您的自定义过滤器不应包含预定义的逻辑，因为init只有第一次触摸您的过滤器才会发生，您必须划分您的逻辑，然后onGridReady您可以执行setModel所需的内容。或者像你已经提到的那样保留一个黑客

于 2019-02-23T19:40:17.657 回答
1

核心问题是您正在与默认情况下过滤器组件的工作方式作斗争。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 功能混合），您当前的实现将给您带来很多问题。

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

于 2019-02-23T19:45:36.017 回答
0

Here You Use Custom Filtering,

If Your Row Not Bind with Value Then You Use Custom Filtering.

         {
            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,
        }
于 2021-01-01T05:05:59.910 回答