valuegetter、valueparser 和 valueformatter 之间的差异 - Ag-grid

Question

我想了解 ag-grid 的 valuegetter vs valueformatter vs valueparser 的正确用例是什么？

https://www.ag-grid.com/javascript-grid-value-getters/

https://www.ag-grid.com/javascript-grid-value-formatters/

https://www.ag-grid.com/javascript-grid-value-parsers/

Answer 1

当您希望在为 ag 网格字段获取数据时具有自定义逻辑时，应使用值 getter。
假设您有 2 个单独的字段显示名字和姓氏，并且您希望有一个派生字段来显示全名，您可以使用 avalueGetter作为这个新字段来连接名字和姓氏
根据文档 -

Value Getter 是一个被调用的函数，允许从字面上任何地方提取值，包括在此过程中执行您希望的任何表达式

例子 -

   {
    headerName: 'Name',
    colId: 'name',
    valueGetter: function(params) {
      return params.data.First_Name + " " + params.data.Second_Name;
    },
  },

请注意，valueGetter被调用的，而不是colDef.field如果你有一个valueGetter定义

当您要格式化数据以供显示时，应使用值格式化程序。这不会影响基础数据。
一个经典的用例是当您想要舍入数字字段的数字时。

例子 ：

{
    headerName: 'Price',
    colId: 'price',
    valueFormatter: function (params) {return params.value.toFixed(2) ;}
 },

编辑单元格时应使用值解析器。它与 ValueFormatter 相反，它允许您在设置单元格值之前格式化数据。

根据文档 -

在网格中编辑单元格后，您有机会在将其插入数据之前解析该值

一个典型的用例是，如果您的数字以逗号显示，您可能希望在编辑它并将数据设置到行时对其进行解析以删除逗号。

需要注意的重要事项
- 截至今天，ag-grid 中的列过滤器已关闭colDef.field或关闭 valueGetter。因此，如果您valueFormatter为列定义，不要期望格式化的值显示在列过滤器中（用于设置过滤器）。使用valueGetter将确保列过滤器与显示的数据匹配。

Answer 2

文档中的此图显示了valueGetter、valueFormatter和之间的流程cellRenderer。

请注意，从网格复制或导出值时，它们将是pre valueFormatter。