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

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