格式化列上的自定义列过滤器

Question

我需要帮助使用自定义列过滤器来处理 JS 对象。

我有一个 slickgrid table，其中一列中的值是 JS 对象：

[
  { id: "1234", text: "Batman"},
  { id: "2345", text: "Robin"}
]

我使用自定义格式化程序将对象粉碎成字符串：

// convert [{id:string, text:string}...] to string
const optionFormatter: Formatter = (row, cell, value, columnDef, dataContext: any) =>
  value ? value.map(o => o.text).join(', ') : '';

在 slickgrid 中显示为

Batman, Robin

我的 slickgrid 选项使用 gridmenu 并启用列过滤：

 this.gridOptions = {
  enableGridMenu: true,
  enableFiltering: true,
  enableAutoResize: true,
  enableColumnReorder: true
};

我的 columnDef 启用了此列的筛选：

{ 
  id: 'owners', 
  name: 'Owners', 
  field: 'owners', 
  sortable: false, 
  formatter: optionFormatter, 
  filterable: true
}

如果单元格中的值是字符串，则一切正常，但如果单元格是对象，则过滤器不起作用。我假设过滤器正在搜索预先格式化的值。

有没有办法为列提供自定义过滤功能，知道如何在 JS 对象中搜索查询字符串？例如，如果我可以只搜索 JSON.stringify(value)，那就足够了。

或者，this answer 描述了我如何使用格式化程序将格式化文本存储为 dataContext 中的不同字符串属性。如果这样做，我该如何指定要过滤的属性，因为它与列字段不同属性？

Answer 1

我找到了解决方法。

预处理我的数据，对所有对象值调用 JSON.stringify：

flattenFeature(f: Feature): any{
  var res = {};
  for (var prop in f) {
    res[prop] = (typeof f[prop] === 'object') ? JSON.stringify(f[prop]) : f[prop];
  }
  return res;
}

然后在我的格式化程序中，我在格式化之前解析 json：

// convert [{id:string, text:string}...] to string
const optionFormatter: Formatter = (row, cell, value, columnDef, dataContext) =>
  value ? JSON.parse(value).map(o => o.text).join(', ') : '';

这允许标准字符串过滤器搜索字符串化的 JSON

格式化列上的自定义列过滤器

Custom column filter on a formatted column

slickgrid