如何在 AG-Grid 中设置列的动态字段？答案

【问题标题】：How to set a dynamic field of a column in AG-Grid?如何在 AG-Grid 中设置列的动态字段？
【发布时间】：2019-11-18 08:14:35
【问题描述】：

假设在下面的示例中，我不想为奖牌（金牌、银牌和铜牌）设置 3 个不同的列，而是希望所有不同的奖牌只有一个列。

（我知道这是一个完全不切实际的例子，但为了学习概念）我想展示：

仅当运动员年龄小于 20 岁（19 岁及以下）时才能获得金牌
运动员年龄在20-30岁（包括20-30岁）的银牌
如果运动员的年龄超过 30 岁（31 岁及以上），则获得铜牌。

而且只有一列名为“奖牌”。

this.columnDefs = [
  {
    headerName: "Athlete",
    field: "athlete"
  },
  {
    headerName: "Sport",
    field: "sport"
  },
  {
    headerName: "Age",
    field: "age",
    type: "numberColumn"
  },
  {
    headerName: "Year",
    field: "year",
    type: "numberColumn"
  },
  {
    headerName: "Date",
    field: "date",
    type: ["dateColumn", "nonEditableColumn"],
    width: 200
  },

  {
    headerName: "Gold",
    field: "gold",
  },
  {
    headerName: "Silver",
    field: "silver",
  },
  {
    headerName: "Bronze",
    field: "bronze",
  }
];

plunker 的完整示例在这里：https://plnkr.co/edit/R0JFJwXuyiM7320rNTtx?p=preview

【问题讨论】：

标签： javascript dynamic ag-grid

【解决方案1】：

您可以为此目的使用valueGetter。 ValueGetter 是一个函数，它返回列的值并获取ValueGetterParams 类型的参数。

    {
      headerName: "Medals",
      valueGetter: (params) => {
        if (params.data.age < 20) {
          return params.data.gold;
        } else if (params.data.age >= 20 && params.data.age < 30) {
          return params.data.silver;
        } else if (params.data.age > 30) {
          return params.data.bronze;
        } else {
        return '';
        }
      },
      type: ["nonEditableColumn"],
      width: 200
    }

这是工作演示的一个小插曲 - https://plnkr.co/edit/okKOsICJ0GHyHnjh8VRY?p=preview

在此处阅读有关 valueGetters 的更多信息 - https://www.ag-grid.com/javascript-grid-value-getters/#value-getter

【讨论】：