在 ag 网格下拉列表中，如何在选择后显示名称并在保存集值而不是名称上显示。？

Question

使用这个reference，我工作过 ag grid 下拉菜单。

问题：一旦我选择了一个下拉值，getvalue() 就会返回值而不是名称。因此它显示列上的数字，它应该是文本。

如果我将其更改为 name，则在保存时，它会绑定到 name 。但这里应该是值。

必需：getValue 应返回名称，保存数组应包含值。

agInit(params: any): void {
    this.params = params;
    this.value = this.params.value;
    this.name = this.params.name;
    this.options = params.options;

}

getValue(): any {
    return this.value;
}

ngAfterViewInit() {
    window.setTimeout(() => {
        this.input.element.nativeElement.focus();
    })
}

stackbltiz 在这里 here

我怎样才能做到这一点。

Answer 1

您不必为它创建新的cellRenderer 和cellEditor，ag-grid 为其提供了内置的select。 **

当您在单个 cell 中使用 objects（用于下拉组合框）时 - 您必须实现 value handlers：valueParser 和 valueFormatter：

Value parser：在网格中编辑单元格后，您有机会在将值插入数据之前对其进行解析。这是使用值解析器完成的。

colDef.valueParser = (params) => {
    return this.lookupKey(mapping, params.newValue);
}

Value formatter：值格式化程序允许您格式化值以进行显示。当数据是一种类型（例如数字）但需要转换以供人类阅读（例如输入货币符号和数字格式）时，这很有用。

colDef.valueFormatter = (params) => {
    return this.lookupValue(mapping, params.newValue);
}

*mapping 代表您的对象，在每个函数中您只是提取键或值。

原解决方案：

lookupValue(mappings, key) {
  return mappings[key];
}

lookupKey(mappings, name) {
    var keys = Object.keys(mappings);

    for (var i = 0; i < keys.length; i++) {
        var key = keys[i];

        if (mappings[key] === name) {
        return key;
        }
    }
}

这里我做了一点修改：

lookupValue(mappings, key:string) {
    if(!mappings || !mappings.find(item => item.Id == key)) return null;
    else
        return mappings.find(item => item.Id == key).Value;
}

lookupKey(mappings, name) {
    let key: any;
    for (key in mappings) {
        if (mappings.hasOwnProperty(key)) {
            if (name === mappings[key]) {
                return key.Id;
            }
        }
    }
}

更新

要填充下拉列表，您需要使用 cellEditorParams:

colDef.cellEditor = 'selectCellEditor';
colDef.cellEditorParams = {
    values: yourList,
},

** 但如果需要，您仍然需要同时拥有两个渲染器并在其中存储object，然后您就可以选择在每个阶段显示的内容。