如何在 ag-grid 上显示和使用单选按钮？

Question

我正在学习 ag-grid 并尝试使用以下代码在我的应用程序中显示复选框。

在 app.component.html 中：

<ag-grid-angular
  style:"width: 500px; height: 500px;"
  class: "ag-theme-balham"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  rowSelection="multiple"
  [gridOptions]="gridOptions"
  [gridReady]="onGridReady($event)">
</ag-grid-angular>

在 AppComponent.ts 中：

export class AppComponent implements OnInit {
  @ViewChild('agGrid')
  agGrid: AgGridNg2;
  private gridApi;
  private gridColumnApi;
  gridOptions: GridOptions;

  columnDefs = [
    {headerName: 'Make', field: 'make', checkboxSelection: true}, 
    {headerName: 'Model', field: 'model'}
    {headerName: 'Price', field: 'price'}, 
  ];
  rowData: [
    {make: 'Toyota', model: 'Celica', price: 35000},
    {make: 'Ford', model: 'Mondeo', price: 32000},
    {make: 'Porsche', model: 'Boxter', price: 72000}
  ];

  onGridReady() {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
}

我想显示单选按钮而不是复选框。

Answer 1

对于处理visual部分，您需要创建自定义 cellRenderer

为了处理edit东西，你应该创建自定义cellEditor

因此，对于 custom components，您需要.html为视觉事物和.ts逻辑处理创建文件。

简单.html的单选按钮：

<div class="radio-container">
    <input type="radio" [value]="1" [(ngModel)]="radioValue" (change)="stopEdit()">
    <input type="radio" [value]="2" [(ngModel)]="radioValue" (change)="stopEdit()">
    <input type="radio" [value]="3" [(ngModel)]="radioValue" (change)="stopEdit()">
</div>

并且.ts您必须处理ICellEditorComp functions：

1. agInit - 用于初始化并将现有值绑定到您的模型
2. isPopup- 它是一个popup窗口还是在单元格内
3. getValue- 这function将在 stopEditingapi 函数执行后返回值

简单的 .ts

private params: any;
public radioValue: number;

agInit(params: any): void {
    this.params = params;
    this.radioValue = params.value;
}

getValue(): any {
    return this.radioValue;
}

isPopup(): boolean {
    return true;
}

stopEdit() {
  alert(`Value changed to: ${this.radioValue}`);
  this.params.api.stopEditing();
}

不要忘记，该自定义components应包含在frameworkComponents内部gridOptions或作为[frameworkComponents]htmlag-grid属性。

工作plnkr 样本

更新：row-selection通过radio-button内部cellRenderer

NOT SELECTED
<input type="radio" [(checked)]="!params.node.selected"  (change)="handleChange()">
SELECTED
<input type="radio" [(checked)]="params.node.selected" (change)="handleChange()">
{{params.value}}

handleChange() {
  this.params.node.setSelected(!this.params.node.selected)
}

此外-记住，在这种情况下，我们并不需要使用editor，可以逻辑通过处理renderer只

工作plnkr 样本