我对 ag-grid 很陌生,正在评估它。
我的项目数据有多个查找表(即 Foo 有一个 Bar 类别、一个 Baz 品牌和一个 Boo 类),我希望能够在 ag-grid 中进行编辑。不幸的是,这些查找表不在我的控制范围内,而且我并不总是有顺序 ID。
例子:
Foo 有一个类
类可以是以下之一:
- ID - 值(value)
- 2 - 测试
- 3 - UAT
- 6 - 未知
- 9 - 生产
- 15 - 发展
我无法控制 ID 或值。
因此,如果我放入 agSelectCellEditor,我能否以某种方式告诉它显示值,但收集 ID?
有其他人对我如何收集职业、品牌等有更好的了解吗?
预计到达时间:
来自农业网格网站 ( https://www.ag-grid.com/javascript-grid-cell-editing/#agselectcelleditor-agpopupselectcelleditor ):
colDef.cellEditor = 'agSelectCellEditor';
colDef.cellEditorParams = {
values: ['English', 'Spanish', 'French', 'Portuguese', '(other)']
}
这是我试过的方法,但我无法在此处取回 ID。也许其他人有更好的想法或之前已经实现过。
感谢您帮助农业网格新手。
最佳答案
您可以通过创建自定义单元格编辑器来实现。
组件:
drop.down.editor.ts
import {AfterViewInit, Component, ViewChild, ViewContainerRef} from "@angular/core";
import {ICellEditorAngularComp} from "ag-grid-angular";
@Component({
selector: 'dropdown-cell-editor',
templateUrl: "drop.down.editor.html"
})
export class DropDownEditor implements ICellEditorAngularComp, AfterViewInit {
private params: any;
public value: number;
private options: any;
@ViewChild('input', {read: ViewContainerRef}) public input;
agInit(params: any): void {
this.params = params;
this.value = this.params.value;
this.options = params.options;
}
getValue(): any {
return this.value;
}
ngAfterViewInit() {
window.setTimeout(() => {
this.input.element.nativeElement.focus();
})
}
}
drop.down.editor.html
<select #input [(ngModel)]="value">
<option *ngFor="let item of options" value="{{item.value}}">{{item.name}}</option>
</select>
然后添加模块声明
@NgModule({
imports: [ ... , AgGridModule.withComponents( [DropDownEditor]) ],
declarations: [ ..., DropDownEditor ]
})
然后在列定义中使用它
{
headerName: "Drop down",
field: "dropdown",
cellEditorFramework: DropDownEditor,
editable: true,
cellEditorParams: {
options: [{
name: "First Option",
value: 1
},
{
name: "Second Option",
value: 2
}
]
}
}
完整示例 here
关于javascript - 在 ag-grid 单元格中选择值和 ID?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55048083/