如何将列映射到 SlickGrid 中的复杂对象答案

【问题标题】：How to map column to complex object in SlickGrid如何将列映射到 SlickGrid 中的复杂对象
【发布时间】：2014-02-17 12:18:12
【问题描述】：

var data = [{"Id":40072,"Id2":40071,"SmDetails":{"Id1":40071,"Id2":40072}}]

我想在列中显示SmDetails.Id1。这怎么可能？我试过了：

var columns = [{name:'Personnel',field:SmDetails.id1,id:'detailId'}];

请帮帮我请帮帮我

**My latest code**
         var data = [{"Id":40072,"Id2":40071,"allocationDetails":{"Id1":40071,"allocationDetails":{"accommodationId":4007}}}]
    var grid;
                var columns = [                                        {name:"Personnel",field:"allocationDetails",fieldIdx:'accommodationId', id:"accommodationId"}];
                var options = {
                     enableCellNavigation: true,
                    enableColumnReorder: false,
                     dataItemColumnValueExtractor:
                                                                function getValue(item, column) { 
                        var values = item[column.field];                             
                      if (column.fieldIdx !== undefined) {
                return values && values[column.fieldIdx];
                } else {
                return values;
                }}};
                var gridData=$scope.Vo;//This return as json format                         
                grid = new Slick.Grid("#testGrid",gridData, columns);
    This is the code tried recently.

【问题讨论】：

试试SmDetails.Id1（我是大写的）
是的，我也试过了。但是没有用。

标签： slickgrid

【解决方案1】：

您需要提供custom value extractor 来告诉网格如何读取您的对象。

var options = {
  enableCellNavigation: true,
  enableColumnReorder: false,
  dataItemColumnValueExtractor:
  // Get the item column value using a custom 'fieldIdx' column param
  function getValue(item, column) { 
    var values = item[column.field];
    if (column.fieldIdx !== undefined) {
        return values && values[column.fieldIdx];
    } else {
        return values;
    }
  }
};

列定义如下：

{
  id: "field1",
  name: "Id1",
  field: "SmDetails",
  fieldIdx: 'Id1'
}, {
  id: "field2",
  name: "Id2",
  field: "SmDetails",
  fieldIdx: 'Id2'
} //... etc

查看this fiddle 获取工作示例。

【讨论】：

我在我的应用程序中试过这个。但值显示为 [object Object]。
将您的最新代码添加到原始帖子的末尾，以便我查看您的设置方式。
请查看最新添加的 cmets
allocationDetails 嵌套在编辑提供的数据中。那是正确的结构吗？ allocationDetails:{ allocationDetails:{}}

【解决方案2】：

尝试将您的 data 转换为单一长度值的对象...

newData = {};
for(key in data[0]){
    parentKey = key;
    if(typeof(data[0][key]) == "object"){
       childData = data[0][key];
       for(key in childData){
          childKey = key;
          newKey = parentKey+childKey;
          newData[newKey] = childData[childKey];
       }
    } else {
       newData[key] = data[0][key];
      }
}

这将像这样转换您的 data 对象

newData = {Id: 40072, Id2: 40071, SmDetailsId1: 40071, SmDetailsId2: 40072};

现在使用这个newData 在网格中映射您的数据项

【讨论】：

【解决方案3】：

我发现这适用于嵌套属性，例如：

var columns = [
    { id: "someId", name: "Col Name", field: "myRowData.myObj.myProp", width: 40}
..
];

var options {
...
dataItemColumnValueExtractor: function getItemColumnValue(item, column) {
    var val = undefined;
    try {
        val = eval("item." + column.field);
    } catch(e) {
        // ignore
    }
    return val;
    }
};

【讨论】：