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

Question

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

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

这个解决方法似乎有点笨拙。 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 只会在第一次触摸您的过滤器时发生 ，您必须划分逻辑，然后在 onGridReady 中，您可以用需要的东西执行 setModel。或者像你已经提到的那样保持黑客

Answer 2

此处使用自定义过滤，

如果您的行未与值绑定，则使用自定义筛选。

         {
            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 自定义过滤器

AgGrid custom filter not created until interaction

ag-grid

angular

ag-grid-angular