AG-Grid：如何根據同一行中其他單元格中的值更改單元格的顏色

當前正在使用AG-網格庫並對呈現表中的數據作出反應。這裏是什麼，我試圖做一個簡單的例子：AG-Grid：如何根據同一行中其他單元格中的值更改單元格的顏色

Soccer Player 
player1 
player2 
player3

在上面的專欄中，我想更改列的基礎上的目標球員已經打進數量的顏色。在AG-Grid中，我找不到這樣做的方法。 AG-Grid允許你定義單元格樣式規則，但據我所知，規則依賴於該單元格中的值。在上面的例子中，如果玩家名稱單元格獲得了10個或更少的目標，則可能會突出顯示爲綠色，如果他們獲得了20個或更少的目標，則爲藍色。

有沒有人對如何做到這一點有任何意見，推薦另一個可能具有此功能的庫？

來源

2017-04-05 Alex Cauthen

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

來源

2017-04-07 07:18:53

這基本上是我終於實現了。起初我使用了CellRenderer，但爲了簡明起見，最後切換到了CellStyle。我會給你檢查，因爲你的答案是非常徹底的:) –

AG-Grid：如何根據同一行中其他單元格中的值更改單元格的顏色

回答

相關問題