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

Posted 2023-03-28

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

【英文标题】：AG-Grid: How to change color of cell based on value in other cell in the same row

【发布时间】：2017-08-31 16:47:12

【问题描述】：

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

Soccer Player
player1
player2
player3

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

是否有人对如何执行此操作有任何想法，或者可以推荐另一个可能具有此功能的库？

【参考方案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

【讨论】：

这基本上就是我最终要做的。起初我使用了 CellRenderer，但为了简洁起见，我最终切换到了 CellStyle。我会给你支票，因为你的回答非常彻底:)

我想从 playerName 列的变化中添加样式，例如添加到 targetsScored 列，我们该怎么做

当一个类的值改变时，有没有办法将一个类动态附加到单元格？

是的，有可能。您必须提供一个将参数作为参数的函数。从参数中，您可以检测更改的值并返回所需的类。检查以下文档链接：ag-grid.com/javascript-grid-cell-styles/#cell-class