Ag grid 如何将JSON数组分配给ag grid RichSelectCellEditor

我从数据库中得到一个有两列的下表

int-ID

字符串描述

我希望ag网格添加一个具有正确模式的新行： 一个特定的单元格将有一个“RichSelectCellEditor”或类似的东西，显示描述，但当我选择一个特定的行时，我想知道ID

例如，选择“男性”时，我希望得到“0”值：

我使用的是ag网格版本17.1.1 我的columnDefs代码如下所示：

headerName: "blah blah",
field: "someField",
cellStyle:{
    'text-align':"center"
},
editable: true,
cellEditorSelector: function (params){
    return{
        component: ' agRichSelectCellEditor',
        params: {values: vm.ColumnTypes}
    }
}

[
   {"ColumnTypeID":1,"ColumnTypeName":"Boolean"}, 
   {"ColumnTypeID":2,"ColumnTypeName":"String"}, 
   {"ColumnTypeID":3,"ColumnTypeName":"Date"}, 
   {"ColumnTypeID":4,"ColumnTypeName":"Bit"}, 
   {"ColumnTypeID":5,"ColumnTypeName":"Decimal"}, 
   {"ColumnTypeID":6,"ColumnTypeName":"Integer"}
]

有了这个代码，我明白了（而不是“男性”、“女性”等等）

就我而言， vm.ColumnTypes如下所示：

headerName: "blah blah",
field: "someField",
cellStyle:{
    'text-align':"center"
},
editable: true,
cellEditorSelector: function (params){
    return{
        component: ' agRichSelectCellEditor',
        params: {values: vm.ColumnTypes}
    }
}

[
   {"ColumnTypeID":1,"ColumnTypeName":"Boolean"}, 
   {"ColumnTypeID":2,"ColumnTypeName":"String"}, 
   {"ColumnTypeID":3,"ColumnTypeName":"Date"}, 
   {"ColumnTypeID":4,"ColumnTypeName":"Bit"}, 
   {"ColumnTypeID":5,"ColumnTypeName":"Decimal"}, 
   {"ColumnTypeID":6,"ColumnTypeName":"Integer"}
]

首先，让我们看一下

值

：要从中选择的值列表

和来自同一链接的短样本

if (params.data.type === 'gender') return {
    component: 'agRichSelectCellEditor',
    params: {values: ['Male', 'Female']}
};

params:{values:['Male'，'Female']}

-

values

应该有一个可能值的列表（非对象）

对于

对象

，您需要为提取、解析和绑定值创建一个变通方法

让我们深入一点

这是我的完全相同解决方案的类似代码部分（

objects

with

agRichSelect

）

extractValues

应返回用于标识的

键列表，该列表将用于连接所需的值

extractValues(mappings) {
    return mappings.map(item=>item.ColumnTypeID);
}

lookupValue
将由
ag网格内部使用
，通过
键
（Id）获得准确的
值

最后一个
查找键
将在您从
组合框
（下拉输入）中选择任何内容后使用，如果
键
（Id）-将用于绑定，我们需要通过
值
检索它

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

使用plnkrI提供vm.ColumnTypes的一部分或完整代码。我已经添加了vm.ColumnTypes。另外，我还使用JSON数组上的过滤器和CellRenderer实现了与您的代码类似的功能。谢谢你的帮助
lookupKey(mappings, name) {
    let key:any;
    for (key in mappings) {
        if (mappings.hasOwnProperty(key)) {
            if (name === mappings[key]) {
                return key.ColumnTypeID;
            }
        }
    }
}