2017-04-05 123 views
0

現在、AGグリッドライブラリと連携して反応し、データをテーブルにレンダリングします。ここで私は何をしようとしているの単純な例である:私はプレイヤーが獲得している目標の数に基づいて、列の色を変更したい上記の欄にはAG-Grid:同じ行の他のセルの値に基づいてセルの色を変更する方法

Soccer Player 
player1 
player2 
player3 

。 AGグリッドで私はこれを行う方法を見つけることができません。 AG-Gridでは、セルスタイリングルールを定義できますが、ルールがそのセルの値に依存していることがわかります。上記の例では、プレイヤー名のセルが10以下のゴールであれば緑色に、20以下のゴールであれば青色にハイライト表示されます。

誰でもこれを行う方法や考え方はありますか?この機能を持つ別のライブラリをお勧めしますか?

答えて

2

グリッド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

+0

これは基本的に私がやってしまったものです。最初はCellRendererを使用しましたが、簡潔にCellStyleに切り替えることになりました。私はあなたの答えは非常に徹底しているので、あなたにチェックを与える:) –

関連する問題