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

Question

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

Soccer Player
player1
player2
player3

在上面的栏中，我想根据球员的进球数更改栏的颜色。在 AG-Grid 中，我找不到执行此操作的方法。 AG-Grid 允许您定义单元格样式规则，但据我所知，规则取决于该单元格中的值。在上面的示例中，如果球员的进球数不超过 10 个，球员姓名单元格可能会突出显示为绿色，如果他们的进球数不超过 20 个，则可能会突出显示为蓝色，等等。

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

Answer 1

ag-grids document on cell styling 表示您可以在列定义中定义一个 cellStyle。您可以手动定义样式对象，也可以使用将 return 具有 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：如何根据同一行中其他单元格的值更改单元格的颜色

AG-Grid: How to change color of cell based on value in other cell in the same row

javascript

reactjs

ag-grid