Slickgrid - 具有复杂对象的列定义答案

【问题标题】：Slickgrid - Column Definition with Complex ObjectsSlickgrid - 具有复杂对象的列定义
【发布时间】：2012-02-29 02:08:21
【问题描述】：

我有一个 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 对象中的名称属性，但我无法让列定义识别数据所在的位置。这是我的 firstName 列定义的示例：

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

尽管数据在那里，但视图不会呈现名称。是否可以将列绑定到驻留在另一个对象中的对象属性？如果是这样，我做错了什么？

【问题讨论】：

这是一个适用于“点”字段值的通用解决方案：stackoverflow.com/a/24566666/3445021
@tc7：该解决方案使用eval()，因此虽然它可能有效，但它不是最佳解决方案。

标签： json slickgrid

【解决方案1】：

默认情况下，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 代码似乎有点不一致，编辑器没有考虑这个选项，所以这个解决方案只有在你不编辑就显示数据时才可用。

【讨论】：

这就是我所害怕的。我喜欢你的建议，我会在升级我们的 SlickGrid 库时尝试一下。这些名称是可编辑的，因此我将不得不退回到我之前使用的扁平对象。非常感谢您的建议。
不确定 dataItemColumnValueExtractor 记录在哪里，但这是此问题的正确答案。谢谢！
请注意，自定义编辑器以获取和设置结构化数据非常容易
这是一个很好的解决方案，而且很有效。但是在分组之后，排序和过滤就不能正常工作了。我在 github 中打开了一个关于此的问题。

【解决方案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 : "";
};

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

【讨论】：