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

dev 发表于 Dev

开发者

我正在学习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;
  }
}

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

非钉

要处理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：

agInit -用于初始化并将现有值绑定到模型
isPopup-是popup窗户还是牢房内
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样本

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。