angular2 ag-grid-ng2如何在标头单元格中嵌入（默认/自定义）过滤器输入 [英] angular2 ag-grid-ng2 how to embed (default/custom) filter input in header cell

问题描述

我试图为网格创建自定义标题单元格，并希望将用于过滤的输入类型直接嵌入到标题单元格中，而不是单击菜单按钮。

I trying to create custom header cells for my grid and would like to embed input type for filtering right into the header cell instead of clicking the menu button. Is it possible to move filter and other fields from under menu section into the header cell?

推荐答案

是否可以将菜单区域下的过滤器和其他字段移到标题单元格中？实际上，随着ag-grid的最新更新到版本8以及ag-grid-ng2模块的更新，可以通过自定义组件指定标头单元格。任何自定义过滤器都可以创建为组件，并附加到所需的columnDef。当然可以在针对不同框架专门更新的ag-grid文档中找到更多详细信息（ angular2农业网格文档）。
为了解决该问题，我为不同的列类型和过滤器类型创建了一个工厂，如下所示：

The issue is solved. Actually, with the latest update of the ag-grid to the version 8 as well as the update of the ag-grid-ng2 modules, it is possible to specify the header cells via the custom components. Any custom filters can be created as components either and attached to the needed columnDef. More details can surely be found in the ag-grid docs that were specifically updated for different frameworks (angular2 ag-grid docs). To solve the problem I created a factory for different column types and filter types as follows:

colDef = {
...
filterFramework: PartialFilterComponent as {new(): PartialFilterComponent},
headerComponentFramework: HeaderCellComponent as {new(): HeaderCellComponent},
headerComponentParams: {
    anyCustomParams: this.customParams
},
cellRendererFramework: CellRendererComponent as {new(): CellRendererComponent},
...
};

请注意，必须在模块声明和AgGridModule.withComponents（[]中注册注入的组件。 ）导入。进一步，过滤器组件将可用于标头组件，如下所示：

Please note that you have to register the injected components in the module declarations and AgGridModule.withComponents([]) import. Further on, the filter component will be available the header component as follows:

public agInit(params: ISmartHeaderParams): void {
        this.params = params;
        this.colDef = this.params.column.getColDef();
        let field = this.params.column.getColId();
        let agGridFilter = this.gridOptions.api.getFilterInstance(field);
        this.filterInstance = agGridFilter.getFrameworkComponentInstance();
    }

在标题部分添加输入字段：

Adding input field to header component:

 <input #input (ngModelChange)="onChange($event)" [ngModel]="text">

然后调用filterInstance方法进行如下搜索：

And then calling the filterInstance method to search as follows:

public onChange(newValue: any): void {
        if (this.text!== newValue) {
            this.text= newValue;
            this.filterInstance.onChange(newValue);
        }
    }

对列数据进行过滤，因为每个列都应该如此。您现在可以应用任何过滤器方法或创建任何自定义标头组件。我想目前这些部分已被充分记录并有很好的示例。

The columns data gets filtered as it should per every column. You can apply any filter method or create any custom header component now. I guess at the moment these parts are well documented and have good examples.

这篇关于angular2 ag-grid-ng2如何在标头单元格中嵌入（默认/自定义）过滤器输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！