4

我对 ag-grid 很陌生，正在评估它。

我的项目数据有多个查找表（即 A Foo 具有 Bar 类别、Baz 品牌和 Boo 类别），我希望能够在 ag-grid 中进行编辑。不幸的是，这些查找表不在我的控制范围内，而且我并不总是有顺序 ID。

例子：

Foo 有一个类

类可以是以下之一：

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

我无法控制 ID 或值。

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

其他人对我如何收集班级、品牌等有更好的想法吗？

预计到达时间：

从 ag-grid 站点（https://www.ag-grid.com/javascript-grid-cell-editing/#agselectcelleditor-agpopupselectcelleditor）：

colDef.cellEditor = 'agSelectCellEditor';
colDef.cellEditorParams = {
    values: ['English', 'Spanish', 'French', 'Portuguese', '(other)']
}

这是我尝试过的，但我无法在此处取回 ID。也许其他人有更好的想法或之前已经实施过。

感谢您帮助 ag-grid noob。

4

1 回答 1

8

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

零件：

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

完整的例子在这里

于 2019-03-07T18:30:12.803 回答