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

Question

我从数据库中获得了一个基础设施 table，它有两列

整数-ID

字符串 - 描述

并且我希望 ag-grid 添加具有正确模式的新行：一个特定的单元格将有一个 'RichSelectCellEditor' 或类似的东西，显示描述，但是当我 select 一个特定的行时，我想知道 ID

例如，当 selecting "male" 时，我想得到 '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}
    }
}

使用此代码，我明白了（而不是 'male'、'female' 等）

[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

Fist, let's have a look on the doc

values: List of values to be selected from.

和相同的短样本 link

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

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

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

Let's go deeper

这是我完全相同的解决方案的相似代码部分（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 应该 return 一个 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 将被使用，一旦你将 select 来自 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;
            }
        }
    }
}

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

How to assign a JSON array to ag-grid RichSelectCellEditor

ag-grid