Ag-grid valueFormatter 和列过滤器

Question

我在使用 ag-grid

valueFormatter

和列过滤器时遇到问题 (https://www.ag-grid.com/javascript-data-grid/filtering/)。

我有一个简单的colDef：

{
        headerName: 'My column',
        field: 'myData',
        hide: true,
        valueFormatter: this.formatterBooleanToHuman,
      },

formatterBooleanToHuman 是一个简单的代码，可将

true

更改为 Yes，将

false

更改为 No。

它按预期工作，问题是我们正在使用列过滤器，当我单击过滤器时，我有

true

和

false

可供选择，如果我选择其中任何一个，过滤器不会返回任何内容，因为值现在实际上是是和否。

我无法让他们两个一起工作。为了让列过滤器正常工作，我需要删除 valueFormatter，但我希望两者都能工作。

我尝试将 valueFormatter 函数应用于 filterParams.valueFormatter，它确实更改了过滤器上的值，但有些东西失败了，我得到 2 个“否”和 1 个“是”，但它们都没有过滤。

有什么建议吗？

更新：

所以，我找到了一个解决方案，但我不相信这是正确的方法。

get getcolumnDef(): Array<ColDef> {
  return [
      {
        headerName: 'Boolean Column',
        field: 'booleanValue',
        hide: true,
        valueFormatter: this.formatterBooleanToHuman,
        filterParams: {
          valueGetter: (params) => this.filterBooleanValueGetter(params, 'booleanValue')
        }
      }
    ];
  }
        
  private filterBooleanValueGetter(params: ValueGetterParams, propertyName: string) {
    let isDeleted = false;

    const hasValue = !!params && !!params.data && params.data[propertyName];

    if (hasValue) {
      isDeleted = String(params.data[propertyName]) === 'true';
    }

    return isDeleted ? 'Yes' : 'No';
  }

所以，

valueGetter

按预期工作并使我的过滤器工作，我只是认为让它像这样工作有点“肮脏”，我没有在文档中找到任何内容说这就是它需要的方式待完成。所以非常欢迎提出建议。

Answer 1

valueFormatter

仅适用于网格中的数据。但是，即使过滤器显示

true

和

false

而不是格式化值，它也应该正常工作。如果过滤不起作用，则可能表明代码中存在其他错误。也许您依赖于

this

方法中的

formatterBooleanToHuman

？

无论如何，要格式化过滤器中的值，您应该像这样定义

filterParams.valueFormatter

：

{
  // ...
  valueFormatter: this.formatterBooleanToHuman,
  filterParams: {
    valueFormatter: this.formatterBooleanToHuman
  }
}

由于某种原因，给过滤器格式化程序的值是

string

而不是

boolean

（ag-grid中的错误？），您需要调整它。

请参阅此处的完整示例：https://plnkr.co/edit/o3sN3GodqQumVe09

Answer 2

使用

valueGetter

而不是 valueFormatter 对我有用。 ValueGetter 文档

{
 valueGetter: this.getDataValue
}

Answer 3

@Sai 但 valueGetter 不会更改该字段的数据。如果您尝试将该行与原始字段一起使用怎么办？