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

要处理visual零件，您需要创建自定义cellRenderer

为了处理edit的东西，你应该创建自定义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您必须处理ICellEditorCompfunctions：

1. agInit- 用于初始化现有值并将其绑定到模型
2. isPopup- 它是popup窗口还是单元格内部
3. 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应该包含在gridOptions内部frameworkComponents或作为 htmlag-grid属性[frameworkComponents]。

工作 PLNKR 样品

更新：通过cellRenderer内部radio-buttonrow-selection

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 样品

Answer 2

第 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 3

您始终可以在 AppComponent.ts 中使用 rowSelect 属性。 只需将属性从多个更改为单个即可。这样，复选框的行为将类似于单选按钮。

rowSelection: 'single',

Answer 4

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

接下来，Ag网格需要显示一个复选框，我们稍后将将其转换为单选按钮。因此，在正确的列定义中需要这样做：checkboxSelection: true

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

.ag-checkbox-input-wrapper::after {
content: 'f124'
}

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

Answer 5

首先创建自定义渲染：

.HTML：

<div>
<input name="radio" type="radio" [checked]="isChecked" (click)="onClick()">
</div>

TS：

export class SelectionRendererComponent implements ICellRendererAngularComp {
params: any;
row: any;

get isChecked(): boolean {
//if you need it
}
agInit(params: ICellRendererParams): void {
this.params = params;
this.row = this.params.data;
}
refresh(): boolean {
return false;
}
onClick(): void {
//trigger subscription
}
}

AgGridConfiguration：

initializeGridColumns(): Array<ColDef > {
const columnDefinitions = new Array<ColDef>();
columnDefinitions.push(new UpdateSelectionColumn().create());
columnDefinitions.push(
{ headerName: 'First Name', field: 'FirstName', width: 300},
....
return columnDefinitions;
}
export class UpdateSelectionColumn {    
create(): ColDef {
return {
headerName: '',
field: '',
cellRendererFramework: SelectionRendererComponent
};
}
}