Вот как создать средство визуализации ячеек agGrid в Angular, чтобы привязать один из ваших столбцов к флажку.
Этот ответ в значительной степени основан на отличном ответе из ответа user2010955 выше, но с немного большим объяснением и обновлен с последними версиями agGrid и Angular (я получал ошибка с использованием его кода перед добавлением следующих изменений).
И да, я знаю, что этот вопрос касался версии agGrid React, но я уверен, что не буду единственным разработчиком Angular, который наткнется на эту веб-страницу StackOverflow. отчаяния, пытаясь найти угловое решение этой проблемы.
(Между прочим, я не могу поверить, что сейчас 2020 год, а в agGrid для Angular нет средства визуализации флажка, включенного по умолчанию. Серьезно? !!)
Во-первых, вам нужно определить компонент рендерера:
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';
@Component({
selector: 'checkbox-cell',
template: `<input type="checkbox" [checked]="params.value" (change)="onChange($event)">`
})
export class CheckboxCellRenderer implements ICellRendererAngularComp {
public params: ICellRendererParams;
constructor() { }
agInit(params: ICellRendererParams): void {
this.params = params;
}
public onChange(event) {
this.params.data[this.params.colDef.field] = event.currentTarget.checked;
}
refresh(params: ICellRendererParams): boolean {
return true;
}
}
Затем вам нужно сообщить об этом своему @NgModule:
import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
. . .
@NgModule({
declarations: [
AppComponent,
CheckboxCellRenderer
],
imports: [
BrowserModule,
AgGridModule.withComponents([CheckboxCellRenderer])
],
providers: [],
bootstrap: [AppComponent]
})
В вашем компоненте, который отображает agGrid, вам необходимо импортировать ваше средство визуализации:
import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
Давайте определим новые столбцы для нашей сетки, некоторые из которых будут использовать это новое средство визуализации:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
@ViewChild('exampleGrid', {static: false}) agGrid: AgGridAngular;
columnDefs = [
{ headerName: 'Last name', field: 'lastName', editable: true },
{ headerName: 'First name', field: 'firstName', editable: true },
{ headerName: 'Subscribed', field: 'subscribed', cellRenderer: 'checkboxCellRenderer' },
{ headerName: 'Is overweight', field: 'overweight', cellRenderer: 'checkboxCellRenderer' }
];
frameworkComponents = {
checkboxCellRenderer: CheckboxCellRenderer
}
}
И теперь, когда вы создаете свою agGrid, вам нужно рассказать ей о самодельных компонентах фреймворка, которые вы используете:
<ag-grid-angular #exampleGrid
style="height: 400px;"
class="ag-theme-material"
[rowData]="rowData"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents" >
</ag-grid-angular>
Уф!
Да ... мне потребовалось время, чтобы придумать, как соединить все части вместе. Собственный веб-сайт agGrid действительно должен был включать такой пример ...
person
Mike Gledhill
schedule
23.04.2020