如何在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.
推荐答案
要处理
视觉
部分,您需要创建自定义
cellRenderer
For handing
visual
part, you need to create customcellRenderer
要处理编辑
的内容,您应该创建自定义 cellEditor
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
:
-
agInit
-用于初始化并将现有值绑定到模型 -
isPopup
-是弹出窗口
窗口还是单元格内部 -
getValue
-函数
将在 之后返回值 api函数执行
agInit
- for initialization and binding existing value to your modelisPopup
- would it be apopup
window or inside the cellgetValue
- thisfunction
will return the value afterstopEditing
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.
已运行 plnkr示例
更新:
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)
}
另外-请记住,在这种情况下,我们不需要使用编辑器
,逻辑只能通过 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屋!