具有对象值的 ag-grid cellEditor select

Question

我想 select 来自用户列表：

user.ts

export class User
{
    constructor (public id: number, public userName : string){}
}

列定义如下所示：

this.columns = [
                {headerName: "Assigned", field:"user.userName", 
                 editable: true ,cellEditor: "select", 
                 cellEditorParams: {values : this.users.map(u=> u.userName)},
]

我希望能够 select 列表中的用户并在 cellValueChanged 对象中获取。

是否有一个选项可以让 user 成为字段而不是字符串值，并且 user.username 仍会显示在单元格中？

Answer 1

最后我找到了一个解决方法，让 '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
  }
},

想法是在 select params 中我们将只给出字符串，我们将尝试根据 name 找到对象的 id。重要的是我们同意 name 是唯一字段。

在设法让它工作之后，我意识到 select 确实是一个非常糟糕的解决方案。工作不正常，我不建议使用它。

@Yonatan Lilling 如有任何问题，请告诉我。

Answer 2

我在 https://www.ag-grid.com/javascript-grid-reference-data/?framework=angular#gsc.tab=0

中找到了 javascript 的解决方案

我创建我的数组：

var Etat_acces = {"1": "Annulée", "2": "Validée", "3": "A valider CEX", "4": "Demandée", "5":"Initialisée"};

在我的专栏定义中：

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

}

以及三个函数：

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

希望这对您有用 ;)

Answer 3

传递带有字符串化对象的数组，并在值格式化程序中解析回字符串化对象以获取 json 对象。这可以用于简单的对象。

创建一个包含字符串化对象的数组

someObject.forEach(element => {
  someArray.push(JSON.stringify(element))       
});

在值格式化程序中调用函数解析回 json object

中的字符串化对象

valueformatter : jsonValueFormatter

复制对象的函数

function jsonValueFormatter(params){
  obj = JSON.parse(params.value)
  return obj.someProperty;
}

具有对象值的 ag-grid cellEditor select

ag-grid cellEditor select with object values

typescript

ag-grid