时间戳

首页 > 解决方案 > valuegetter、valueparser 和 valueformatter 的区别 - Ag-grid

javascript - valuegetter、valueparser 和 valueformatter 的区别 - Ag-grid

问题描述

我试图了解 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/

标签： javascriptag-gridag-grid-angular

解决方案

如果您希望在为您的 ag 网格字段获取数据时拥有自定义逻辑，则应使用value 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将确保列过滤器与显示的数据匹配。

推荐阅读