用ag-grid单元内的值和ID选择吗? [英] Select with values and IDs inside an ag-grid cell?

问题描述

我对ag-grid非常陌生，正在对其进行评估.

I am very new to ag-grid and am evaluating it.

我的项目数据具有多个查询表(例如，一个Foo有一个Bar类别，一个Baz品牌和一个Boo类)，我希望能够在ag-grid中进行编辑.不幸的是，那些查找表不在我的控制范围内，而且我也不总是具有顺序ID.

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.

示例:

Foo有一个班级

类可以是以下之一:

• ID-值
• 2-测试
• 3-UAT
• 6-未知
• 9-生产
• 15-开发

我无法控制ID或值.

因此，如果我放入agSelectCellEditor，我可以以某种方式告诉它显示值，但收集ID吗?

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:

从ag-grid网站( https://www.ag-grid.com/javascript-grid-cell-editing/#agselectcelleditor-agpopupselectcelleditor ):

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)']
}

这是我尝试过的方法，但是我无法在此处获取ID.也许其他人有一个更好的主意或以前已经实现过.

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.

推荐答案

您可以通过创建自定义单元格编辑器来实现.

You can do it by creating a custom cell editor.

组件:

drop.down.editor.ts

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

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
            }
        ]
    }
}

完整示例此处

这篇关于用ag-grid单元内的值和ID选择吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！