web-dev-qa-db-ja.com

データを動的に変更するためにag-gridセルの色を変更する方法

動的に変化するデータからロードするテーブルがあります。 5秒ごとに更新されます。この例を使用して、ag-gridを使用しています： https://www.ag-grid.com/javascript-grid-sorting/index.php

セルの値が100で、（これよりも小さい、つまり<100）になると仮定するなど、値が変化するセルの色を変更することは可能ですか。セルを赤色にし、大きくなると緑色にします。私はこの例を使用してそれを行おうとしています： https://www.ag-grid.com/javascript-grid-cell-styling/index.php

しかし、私はこれを行う方法を理解できません。

更新：私はそれをこのようにしていますが、色は変わりません：

var columnDefs = [
    {headerName: "Arr Px Slippage", field: "total_wt_arr_slp", width: 100, newValueHandler: compareValues},
    {headerName: "IVWAP Slippage", field: "total_wt_ivwap_slp", width: 100}


];

function compareValues(params) {
    if (params.oldValue > params.newValue){ 
    return {color: 'green', backgroundColor: 'black'};
    console.log(params.newValue);

    }
    if (params.oldValue < params.newValue){ 
    return {color: 'red', backgroundColor: 'black'};
    }
}
javascripthtmlag-grid
5
shek

あなたが書いたことはほとんど正しいです：

function compareValues(params) {
if (params.oldValue > params.newValue){ 
return {color: 'green', backgroundColor: 'black'};
console.log(params.newValue);

}
if (params.oldValue < params.newValue){ 
return {color: 'red', backgroundColor: 'black'};
}

そして、Jarod Moserがこのコールバックのparamsオブジェクトについて提供した情報は、的確で重要です。

あなたが抱えている問題は、あなたがreturn {style}しようとしているのに、それができないということです。 html要素（<div>を含む）にアクセスし、その上にクラスを設定する必要があります（クラスは希望のスタイルで定義されています）。 params.eGridCellにアクセスできるag-gridでこれを実行しましたが、この特定のコールバック内ではeGridCellを使用できません。 <div>にアクセスする良い方法を見つけたら、見つけたものでこの投稿を編集します。

編集-追加情報

私はあなたがやろうとしていることにnewValueHandlerを使うとは思わない。

データをどのように更新しているかはわかりませんが、5秒ごとに更新される可能性があると言っています。

ただし、セルを更新することにした場合は、rowDataオブジェクトにプロパティ「origValue」を追加し、セル値を更新する前に、現在の値を「origValue」に設定してから、新しい値をvalueに設定できます。次に...コールバック関数を使用してcellClass列プロパティを使用し、新しい値を「origValue」と比較して、目的のスタイルを返すことができます。

ドキュメントからの例：

// return class based on function
var colDef3 = {
    name: 'Function Returns String',
    field' 'field3',
    cellClass: function(params) { return (params.value==='something'?'my-class-1':'my-class-2'); }
}


// return array of classes based on function
var colDef4 = {
    name: 'Function Returns Array',
    field' 'field4',
    cellClass: function(params) { return ['my-class-1','my-class-2']; }
}

CellClassのparamsオブジェクトは行データにアクセスでき、新しい値と元の値を比較できます。

あなたが掘ったら多くのオプションがあります。あなたが最善だと思うものを選択してください。

1
JohnR

各列の属性である newValueHandler を使用できるはずです。

ドキュメントから：

単純なテキスト編集を使用したいが、行に挿入する前に何らかの方法で結果をフォーマットしたい場合は、列にnewValueHandlerを指定できます。これにより、値に検証または会話を追加できます。

newValueHandlerには、次の属性を持つparamsオブジェクトが提供されます。

  • ノード：問題のグリッドノード。
  • data：問題の行データ。
  • oldValue： 'field'が列定義にある場合、編集前のデータの値が含まれます。
  • newValue：デフォルトのエディターに入力された文字列値。
  • rowIndex：仮想化された行のインデックス。
  • colDef：列の定義。
  • context：gridOptionsで設定されたコンテキスト。 api：ag-GridAPIへの参照。

したがって、次のようなものがあります。

var colDefs = [{
    header: 'comparing to previous val'
    newValueHandler: compareValues
}]

function compareValues(params){
    if (params.oldValue > params.newValue){ //make it red}
    if (params.oldValue < params.newValue){ //make it green}
}
1
Jarod Moser

これは、agグリッドセルテキストの色と背景色を変更できるコードスニペットです。

 var colDef = {
            name: 'Dynamic Styles',
            field' 'dummyfield',
            cellStyle: function(params) {
                if (params.node.value=='Police') {
        //Here you can check the value and based on that you can change the color
                    //mark police cells as red
                    return {color: 'red', backgroundColor: 'green'};
                } else {
                    return null;
                }
            }
        }
1
Rajanikanta Pradhan

実際、私はちょうど私の仕事を始めました。色を変更する各列に「cellClassRules」属性が必要です。何かのようなもの：

_{headerName: "header", field:"field",suppressMenu: true, volatile: true, suppressMovable: true, cellClassRules: {'bold-and-red': 'x>1'} }
_

ここで、ルールの「x」は列の値です。また、列をvoaltile：trueとしてマークする必要があります。
揮発性フィールドを動的に変更するには、データを更新するときにapi.softRefreshView()が必要です。
cssクラス 'bold-and-red'は、次のようにhtmlファイルで定義できます。bold-and-red{color：darkred; font-weight：太字; }

0
jsmtslch