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

Question

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

Soccer Player
player1
player2
player3

在上面的列中，我想根据球员进球数更改列的颜色。在 AG-Grid 中，我找不到这样做的方法。AG-Grid 允许您定义单元格样式规则，但据我所知，规则取决于该单元格中的值。在上面的例子中，如果球员的名字单元格的进球数为 10 或更少，则他们可能会以绿色突出显示，如果他们的进球数为 20 或更少，则可能会突出显示为蓝色，等等。

有没有人对如何做到这一点有任何想法，或者可以推荐另一个可能具有此功能的库？

Answer 1

关于单元格样式的 ag-grids文档说您可以cellStyle在列定义中定义 a 。您可以手动定义样式对象，也可以使用返回 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