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

Posted 2023-03-28

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

【英文标题】：In ag grid drop down, how to show name once selected and on save set value instead of name.?

【发布时间】：2020-11-26 20:02:22

【问题描述】：

使用这个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

我怎样才能做到这一点。

【问题讨论】：

嗨@user630209 你找到解决方案了吗？我也面临同样的问题。

【参考方案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，然后您就可以选择在每个阶段显示的内容。

【讨论】：

lookupValue(mappings, key:string) 这个键总是未定义的

如何将列表值映射到下拉列？

yourList ：这应该是一个字符串数组吗？它不能有具有 ID 和名称的 JSON 数组

@user630209 list(array) 也是可能的 - 没有任何查找功能。只需检查文档中的selectCellEditor