angular2 ag-grid-ng2如何在标题单元格中嵌入(默认/自定义)过滤器输入

Question

我尝试为我的网格创建自定义标题单元格，并希望将用于过滤的输入类型嵌入到标题单元格中，而不是单击菜单按钮。是否可以将筛选器和其他字段从菜单部分移动到标题单元格中？

Answer 1

问题解决了。实际上，随着ag-grid的最新更新到版本8以及ag-grid-ng2模块的更新，可以通过自定义组件指定标题单元。任何自定义过滤器都可以作为组件创建，并附加到所需的columnDef。更多细节肯定可以在专门针对不同框架(angular2 ag-grid docs)更新的ag-grid文档中找到。为了解决这个问题，我为不同的列类型和过滤器类型创建了一个工厂，如下所示：

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

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

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();
    }

向表头组件添加输入字段：

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

然后调用filterInstance方法搜索，如下所示：

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

列数据按照每列应该进行的方式进行筛选。您现在可以应用任何filter方法或创建任何自定义header组件。我猜目前这些部分都有很好的文档，并且有很好的例子。