Question

目前正在使用AG网格库并对表中的数据进行反应。这是我正在尝试做的一个简单示例：

Soccer Player
player1
player2
player3

在上面的专栏中，我想根据玩家得分的目标数量更改列的颜色。在AG-Grid中，我找不到这样做的方法。 AG-Grid允许您定义单元样式规则，但据我所知，规则取决于该单元格中的值。在上面的示例中，如果玩家名称单元格已经获得10个或更少的目标，则可以将其突出显示为绿色，如果他们已经获得20个或更少的目标，则为蓝色，等等。

有没有人对如何执行此操作有任何想法，或者可以推荐可能具有此功能的其他库？

Answer 1

ag-grids document on cell styling表示您可以在列定义中定义cellStyle。您可以手动定义样式对象，也可以使用将返回css样式对象的函数。

对于您的情况，您可以使用函数来访问行节点数据并基于此计算您的样式。在排序中你想要这样做：

var columnDef = [{
    headerName: "Player Id",
    field: "id"
  },
  {
    headerName: "Player Name",
    field: "playerName",
    cellClass: "playerNameClass",

    // Defining the cell style by using a function

    cellStyle: function(params) {

      /*
      Params give assess to the row node from which we can
      get the node data. So you can get the data for
      another column and style your column based on that.
      */

      var goals = params.node.data.goalsScored;
      console.log({
        "params": params,
        "data": params.data,
        "goals": goals
      });

      // Some Logic to style your components

      if (goals === 0) {
        background = "#B70000"
      } else if (goals === 1 || goals === 2) {
        background = "#FF8400"
      } else if (goals === 3 || goals === 4) {
        background = "#FFF700"
      } else if (goals === 5 || goals === 6) {
        background = "#CEFF00"
      } else if (goals === 7) {
        background = "#05CC00"
      } else {
        background = "#fff"
      }

      // Return the style object

      return {
        background: background
      };
    }
  },
  {
    headerName: "Goals Scored",
    field: "goalsScored"
  }
];

查看此笔以获取详细示例：http://codepen.io/skmSoumya/pen/bqyyQj

AG-Grid：如何根据同一行中其他单元格中的值更改单元格的颜色

1 个答案: