Я пытаюсь создать настраиваемые ячейки заголовка для своей сетки и хочу встроить тип ввода для фильтрации прямо в ячейку заголовка вместо нажатия кнопки меню. Можно ли переместить фильтр и другие поля из раздела меню в ячейку заголовка?
angular2 ag-grid-ng2 как встроить (по умолчанию / настраиваемый) ввод фильтра в ячейку заголовка
Ответы (1)
Вопрос решен. Фактически, с последним обновлением ag-grid до версии 8, а также с обновлением модулей ag-grid-ng2, стало возможно указывать ячейки заголовка с помощью пользовательских компонентов. Любые настраиваемые фильтры могут быть созданы как компоненты и прикреплены к необходимому columnDef. Более подробную информацию можно найти в документации по ag-grid, которая была специально обновлена для разных фреймворков (angular2 ag-grid docs). Чтобы решить эту проблему, я создал фабрику для разных типов столбцов и типов фильтров следующим образом:
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);
}
}
Данные столбцов фильтруются, как и должно быть для каждого столбца. Вы можете применить любой метод фильтрации или создать любой настраиваемый компонент заголовка прямо сейчас. Думаю, на данный момент эти части хорошо задокументированы и содержат хорошие примеры.