Slickgrid - 复杂对象的列定义

时间:2012-02-07 16:19:00

标签: json slickgrid

我有一个Java对象,其中person对象包含displayName对象。我已将其转换为JSP的JSON对象。数据如下所示:

var people = [
{"id":52959,"displayName":{"firstName":"Jim","lastName":"Doe","middleName":"A"},"projectId":50003,"grade":"8","statusCode":"A","gradYear":2016,"buyer":false},
{"id":98765,"displayName":{"firstName":"Jane","lastName":"Doe","middleName":"Z"},"projectId":50003,"grade":"8","statusCode":"A","gradYear":2016,"buyer":true}
];

我想将列绑定到displayName对象中的name属性,但是我无法通过列定义来识别数据所在的位置。以下是我的firstName列定义的示例:

{id: 'displayName.firstName', field: 'displayName.firstName', name: 'First Name',
width: 110, sortable: true, editor: TextCellEditor, formatter: SpaceFormatter,              
cssClass: '', maxLength: 250, editable: true}

虽然数据存在,但视图不会呈现名称。是否可以将列绑定到驻留在另一个对象中的对象属性?如果是这样,我做错了什么?

2 个答案:

答案 0 :(得分:15)

默认情况下,Slickgrid不支持此功能,但您可以通过向选项对象添加自定义值提取器来解决此问题:

var options = {
  dataItemColumnValueExtractor: function(item, columnDef) {
    var names = columnDef.field.split('.'),
        val   = item[names[0]];

    for (var i = 1; i < names.length; i++) {
      if (val && typeof val == 'object' && names[i] in val) {
        val = val[names[i]];
      } else {
        val = '';
      }
    }

    return val;
  }
}

var grid = new Slick.Grid($("#slickgrid"), data, columns, options);

使用slickgrid 2.0测试代码并且工作正常。不幸的是,似乎slickgrid代码有点不一致,并且编辑器没有考虑这个选项,因此只有在不进行编辑的情况下显示数据时,此解决方案才可用。

答案 1 :(得分:2)

我知道这有点旧......但我的工作是对我的物品进行预处理。基本上,将模型展平:

var preProcessItems = function (items) {
  var newItems = [];
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    item['firstName'] = item['displayName']['firstName'];
    newItems[i] = item;
  }
  return newItems;
};

/// when the value is updated on the flat structure, you can edit your deep value here
var fNameFormatter = function (row, cell, value, columnDef, dataContext) {
  // datacontext.displayName.firstName = value;
  return value ? value : "";
};

这个问题似乎更像是一个数据建模问题。