angular - 如何在 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

For handing visual part, you need to create custom cellRenderer

For handling edit stuff, you should create custom cellEditor

因此，对于自定义 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 :

agInit - 用于初始化并将现有值绑定(bind)到您的模型

isPopup - 会是 popup窗口或单元格内部

getValue - 这个 function将返回值 后 stopEditing api 函数执行

简单 .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] html ag-grid属性(property)。

工作过 plnkr sample

Update: row-selection via radio-button inside 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 sample