如何将JSON数组分配给agGRID RichSelectCellEditor [英] How to assign a JSON array to ag-grid RichSelectCellEditor

问题描述

我正在从数据库中获取一个包含两列的INFRA表

int-ID

字符串描述

并且我希望agGrid添加一个具有正确模式的新行： 一个特定的单元格将有一个显示描述的‘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"}
]

推荐答案

拳头，让我们看看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)列表，用于连接所需的值

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;
            }
        }
    }
}

这篇关于如何将JSON数组分配给agGRID RichSelectCellEditor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！