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

时间:2017-12-06 21:23:14

标签: slickgrid

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

我有一个slickgrid表,其中一列中的值是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中的不同字符串属性。如果我这样做,我如何指定要过滤的属性,因为它与列字段不同?

1 个答案:

答案 0 :(得分:0)

我找到了解决方法。

预处理我的数据,在所有对象值上调用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(', ') : '';

这允许标准字符串过滤器搜索stringify'd JSON