typescript ag-grid cellEditor 选择对象值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38834414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ag-grid cellEditor select with object values
提问by Yonatan Lilling
I want to select from a list of users:
我想从用户列表中选择：
user.ts
用户.ts
export class User
{
constructor (public id: number, public userName : string){}
}
the column definition look like this:
列定义如下所示：
this.columns = [
{headerName: "Assigned", field:"user.userName",
editable: true ,cellEditor: "select",
cellEditorParams: {values : this.users.map(u=> u.userName)},
]
I want to be able to select a user from the list and get in cellValueChanged the object.
我希望能够从列表中选择一个用户并获取 cellValueChanged 对象。
Is there an option that the userwill be the field and not a string value and still the user.usernamewill be shown in the cell?
是否有一个选项，user将是字段而不是字符串值，但user.username仍将显示在单元格中？
采纳答案by Radu Linu
Finally I found an workaround to get 'select'working with keyand value.
最后，我找到了一种解决方法来'select'使用key和value。
var colorsNames = [];
colors.forEach(color=> {
colorsNames.push(color.name);
})
...
{
headerName: "Color",
field: "colorId",
width: 150,
editable: true,
cellEditor: 'select',
cellRenderer: function (data: any) {
var color = colors.find(color => color.id == data.value || color.name == data.value);
// here I've added the check for 'color.id' and 'color.name' because initailly from DB will com the id and afterwards form selectparams will come the name
return color.name;
},
onCellValueChanged: function (data: any) {
/**
* because 'select' does not offer us the possibility to use 'key-value' as traditional,
* we will use only values in 'select' and changed to 'id' when will be saved.
*/
var serviceTypeName = data.data.serviceTypeId;
data.data.serviceTypeId = serviceTypes.find(serviceType => serviceType.name == serviceTypeName).id;
},
cellEditorParams: {
values: colorsNames
}
},
The idea is that inside select paramswe will give only strings and we will try to find the idof object based on the name. Important is that we agreed that nameis unique field.
这个想法是在里面select params我们只给出字符串，我们将尝试id根据name. 重要的是我们同意这name是唯一的领域。
After managing to get it working, I realized that indeed the selectis a very poor solution. Is not working properly and I would not advice to use it.
在设法让它工作后，我意识到这确实select是一个非常糟糕的解决方案。工作不正常，我不建议使用它。
@Yonatan Lilling For any question, please let me know.
@Yonatan Lilling 如有任何问题，请告诉我。
回答by Mourad MAMASSI
I found a solution for javascript in https://www.ag-grid.com/javascript-grid-reference-data/?framework=angular#gsc.tab=0
我在https://www.ag-grid.com/javascript-grid-reference-data/?framework=angular#gsc.tab=0 中找到了 javascript 的解决方案
i create my array:
我创建我的数组：
var Etat_acces = {"1": "Annulée", "2": "Validée", "3": "A valider CEX", "4": "Demandée", "5":"Initialisée"};
and in my columnDefs:
在我的 columnDefs 中：
{
headerName: "Etat Ni", field: "etat_acces", editable: true, cellEditor:'select',
cellEditorParams: {
values: extractValues(Etat_acces)
},
valueFormatter: function (params) {
return lookupValue(Etat_acces, params.value);
},
valueParser: function (params) {
return lookupKey(Etat_acces, params.newValue);
}
}
and for the three function :
和三个功能：
function extractValues(mappings) {
return Object.keys(mappings);
}
function lookupValue(mappings, key) {
return mappings[key];
}
function lookupKey(mappings, name) {
for (var key in mappings) {
if (mappings.hasOwnProperty(key)) {
if (name === mappings[key]) {
return key;
}
}
}
}
I hope this can be useful ;)
我希望这会很有用 ;)
回答by Vilas Magare
pass the array with stringified objects, and in value formatter parse back the stringified object to get the json object back. This can be used for simple objects.
传递带有字符串化对象的数组，并在值格式化程序中解析字符串化对象以返回 json 对象。这可以用于简单的对象。
make an array with stringified objects
使用字符串化对象创建一个数组
someObject.forEach(element => {
someArray.push(JSON.stringify(element))
});
in value formatter call the function which parse back the stringified object in json object
在值格式化程序中调用解析 json 对象中字符串化对象的函数
valueformatter : jsonValueFormatter
function for reproducing the object
再现对象的函数
function jsonValueFormatter(params){
obj = JSON.parse(params.value)
return obj.someProperty;
}
