angular2 ag-grid-ng2 как встроить (по умолчанию / настраиваемый) ввод фильтра в ячейку заголовка

Я пытаюсь создать настраиваемые ячейки заголовка для своей сетки и хочу встроить тип ввода для фильтрации прямо в ячейку заголовка вместо нажатия кнопки меню. Можно ли переместить фильтр и другие поля из раздела меню в ячейку заголовка?


person Alexander F    schedule 09.02.2017    source источник


Ответы (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);
        }
    }

Данные столбцов фильтруются, как и должно быть для каждого столбца. Вы можете применить любой метод фильтрации или создать любой настраиваемый компонент заголовка прямо сейчас. Думаю, на данный момент эти части хорошо задокументированы и содержат хорошие примеры.

person Alexander F    schedule 20.02.2017