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

Question

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

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

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

并且只有一列名为 'Medals'。

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

Answer 1

您可以使用 valueGetter 来达到这个目的。 ValueGetter 是一个函数，它 returns 列的值并获取类型 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

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

How to set a dynamic field of a column in AG-Grid?

javascript

dynamic

ag-grid