问题
I am very new to ag-grid and am evaluating it.
My project's data has multiple lookup tables (i.e. A Foo has a category of Bar, a Brand of Baz and a Class of Boo) that I would like to be able to edit in the ag-grid. Unfortunately, those lookup tables are not in my control and I do not always have sequential IDs.
Example:
Foo has a Class
Class can be one of the following:
- ID - Value
- 2 - Test
- 3 - UAT
- 6 - Unknown
- 9 - Production
- 15 - Development
I can't control the IDs or the Values.
So if I put in the agSelectCellEditor, can I somehow tell it to display the values, but collect the IDs?
Has someone else got a better idea on how I can collect the Class, Brand, etc?
ETA:
From the ag-grid site (https://www.ag-grid.com/javascript-grid-cell-editing/#agselectcelleditor-agpopupselectcelleditor):
colDef.cellEditor = 'agSelectCellEditor';
colDef.cellEditorParams = {
values: ['English', 'Spanish', 'French', 'Portuguese', '(other)']
}
This is what I've tried, but I can't get the IDs back out here. Maybe someone else has a better idea or has implemented this before.
Thank you for helping an ag-grid noob.
回答1:
You can do it by creating a custom cell editor.
Component:
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>
then add the module declaration
@NgModule({
imports: [ ... , AgGridModule.withComponents( [DropDownEditor]) ],
declarations: [ ..., DropDownEditor ]
})
then use it in the column definition
{
headerName: "Drop down",
field: "dropdown",
cellEditorFramework: DropDownEditor,
editable: true,
cellEditorParams: {
options: [{
name: "First Option",
value: 1
},
{
name: "Second Option",
value: 2
}
]
}
}
Full example here
来源:https://stackoverflow.com/questions/55048083/select-with-values-and-ids-inside-an-ag-grid-cell