Question

让我们在下面的示例中说，我不想为奖牌（金，银和铜牌）设置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",
  }
];

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

Answer 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

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

1 个答案: