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

问题描述

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

I am learning ag-grid and tried following code to show checkbox in my application.

在app.component.html中：

In 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中：

In 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;
  }
}

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

I wanted to show radio button instead of checkbox.

推荐答案

要处理编辑的内容，您应该创建自定义

For handling edit stuff, you should create custom cellEditor

因此，对于自定义的组件，您需要创建 .html 文件用于可视化内容， .ts 用于逻辑处理。

So, for custom components, you need to create .html file for visual things and .ts for logic handling.

简单 .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 功能：

and on .ts you must handle ICellEditorComp functions:

1. agInit -用于初始化并将现有值绑定到模型


2. isPopup -是弹出窗口窗口还是单元格内部


3. getValue - 函数将在 之后返回值 api函数执行

1. agInit - for initialization and binding existing value to your model
2. isPopup - would it be a popup window or inside the cell
3. getValue - this function will return the value after stopEditing api-function execution

简单 .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();
}

别忘了，自定义的组件应该包含在 gridOptions 内的 frameworkComponents 中，或作为 [frameworkComponents] html ag-grid 属性。

Don't forget, that custom components should be included to frameworkComponents inside gridOptions or as [frameworkComponents] html ag-grid property.

已运行

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)
}

另外-请记住，在这种情况下，我们不需要使用编辑器，逻辑只能通过 renderer

Also - keep in mind that in this case, we don't need to use editor, logic could be handled via renderer only

已完成

这篇关于如何在Ag-grid上显示和使用单选按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！