How to map column to complex object in SlickGrid

问题

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

I want to display SmDetails.Id1 in a column. How is this possible? I tried:

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

Please help me Please help me

**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.

回答1:

You'll need to provide a custom value extractor to tell the grid how to read your object.

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

The column definitions would look like:

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

Check out this fiddle for a working example.

回答2:

try this to convert your data into object of single length values ...

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

This will convert your data object like this

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

Now use this newData to map your data items in grid

回答3:

I find this works well for nested properties, eg:

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

来源：https://stackoverflow.com/questions/21828919/how-to-map-column-to-complex-object-in-slickgrid

标签

slickgrid