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

Question

我从数据库中获取了一个包含两列的基础结构表

int - ID

字符串 - 描述

我希望 ag-grid 添加一个具有正确模式的新行： 特定单元格将具有“RichSelectCellEditor”或类似内容，显示说明，但是当我选择特定行时，我想知道 ID

例如，选择“男性”时，我想获得'0'值：

我使用的是 ag-grid 版本 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}
    }
}

使用此代码，我看到（而不是“男性”、“女性”等）

[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

就我而言， 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"}
]

Answer 1

拳头，来看看doc

values：要从中选择的值列表。

以及来自同一链接的简短示例

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

params: {values: ['Male', 'Female']} - values 应该有一个可能值的列表（不是对象）

在您的情况下，objects，您需要创建一个解决方法来提取、解析和绑定值。

让我们更深入地了解

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

cellEditor = 'agRichSelect';
cellEditorParams= {
    values: this.extractValues(vm.ColumnTypes)
},
valueFormatter=  (params) => {
    return this.lookupValue(vm.ColumnTypes, params.value);
};
valueParser =  (params) => {
    return this.lookupKey(vm.ColumnTypes, params.newValue);
}

extractValues 应该返回一个keys (Id's) 的列表以供识别，用于连接所需的值

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

lookupValue 将在ag-grid 内部使用，以通过key (Id) 获得准确的value

lookupValue(mappings, key) {
    return mappings.find(item=>item.ColumnTypeID==key).ColumnTypeName;
}

最后一个lookupKey 将在您从combo box（下拉输入）中选择任何内容时使用，如果是key（Id） - 将用于绑定，我们需要通过以下方式检索它value;

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