angular - 如何在 ag-grid 上显示和使用单选按钮?
问题描述
我正在学习 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;
}
}
我想显示单选按钮而不是复选框。
解决方案
对于处理
visual
部分,您需要创建自定义cellRenderer
为了处理
edit
东西,你应该创建自定义cellEditor
因此,对于 custom 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
窗户还是牢房内getValue
- 这将在api 函数执行后function
返回值stopEditing
简单的.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
应包含在frameworkComponents
内部gridOptions
或作为[frameworkComponents]
htmlag-grid
属性。
工作 plnkr样本
更新:
row-selection
通过radio-button
内部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样本
推荐阅读
- c++ - 在 PointCloud2 结构 C++/ROS/PCL 库中写入/访问点
- pine-script - 自条件 x 以来仅使用条形数据计算函数
- javascript - 检查对象是否被绘制
- angular - 将复选框 ngModel 发送到过滤器
- javascript - 禁用包含字体的css文件并在使用jquery完成窗口加载时加载它们
- ios - 在低于 13 的 iOS 版本上,UIView 的派生不能转换为 UIView
- soap - 在 Visual Studio 2019 中导入 WSDL (soap) 导入架构失败
- javascript - 使用 React 和 Next.js 将标签添加到具有正确位置的图像坐标
- python-3.x - 从源代码构建时Python3失败
- excel - 将公式应用于 Excel 中的条件格式