如何在 ag-grid 上显示和使用单选按钮? [英] How to show and use radio button on 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.

推荐答案

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

For handing visual part, you need to create custom cellRenderer

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

For handling edit stuff, you should create custom cellEditor

所以，对于自定义的components，你需要创建.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 functions:

and on .ts you must handle ICellEditorComp functions:

1. agInit - 用于初始化并将现有值绑定到模型
2. isPopup - 它是 popup 窗口还是单元格内
3. getValue - 此 function 将在 stopEditing api-function execution
之后返回值

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

别忘了，自定义的 components 应该包含在 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.

工作 plnkr 示例

更新:row-selection 通过 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 处理逻辑

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

工作 plnkr 示例

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