Question

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

Answer 1

问题解决了。实际上，随着版本8的ag-grid的最新更新以及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);
        }
    }

列数据按照每列的过滤进行过滤。您现在可以应用任何过滤方法或创建任何自定义标题组件。我想目前这些部分都有很好的记录并且有很好的例子。

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

1 个答案: