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

您始终可以在 AppComponent.ts 中使用 rowSelection 属性。只需将您的属性从多个更改为单个。这样，复选框的行为就像一个单选按钮。

rowSelection: 'single',

Answer 2

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 - 用于初始化并将现有值绑定到您的模型
isPopup - 是 popup window 还是在单元格内
getValue - 这个 function 将 return 值在 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 应该包含在 gridOptions 内的 frameworkComponents 或 [frameworkComponents] html ag-grid 属性.

工作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

Answer 3

第 1 步：在 columnDefs 中：{checkboxSelection: false} // 将其添加到您的对象中

第 2 步：将此添加到您添加的对象中 checkboxSelection

cellRenderer: function cellTitle(params) {
  let cellValue = '<div class="ngSelectionCell"><input name="selected" type="radio"></div>';
  return cellValue;
},

第 3 步：将此代码添加到本地 css 文件：

.ag-body {
  .ag-row {
    .ag-cell {
      input[type=checkbox]:checked:after, 
      input[type=radio]:checked:after {
        display: none;
       }
      input[type=checkbox]:after, input[type=radio]:after {
        display: none;
      }
    }
  }
}

Answer 4

首先，我们需要设置一些网格属性。如果需要单行 selection（这是单选按钮的正常行为）设置 rowSelection='single'。此外，如果您只想在单击复选框时 select 该行，请添加此属性 suppressRowClickSelection=true

接下来，Ag grid 需要显示一个复选框，我们稍后会把它变成单选按钮。所以在正确的列定义中需要这样做：checkboxSelection: true

然后添加以下内容CSS，将用于复选框的图标更改为单选按钮图标：

.ag-checkbox-input-wrapper::after {
    content: '\f124'
}
    
.ag-checkbox-input-wrapper.ag-checked::after {
    content: '\f125';
}

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

How to show and use radio button on ag-grid?

radio-button

ag-grid

angular