So ändern Sie die Farbe der ag-Rasterzellen für dynamisch sich ändernde Daten

Was Sie geschrieben haben, ist meistens richtig:

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'};
}

Und die info Jarod Moser gab Sie über das params-Objekt für diesen Rückruf ist vor Ort auf und wichtig.

Das Problem, das Sie haben ist, dass Sie versuchen, zu return {style} aber das kannst du nicht tun. Sie müssen Zugriff auf das html-element (das mit <div>) und eine Klasse (nachdem die Klasse definiert, mit dem Stil, den Sie wünschen). Ich habe dies getan, im ag-Gitter, wo ich Zugang zu params.eGridCell aber in diesem speziellen Rückruf eGridCell ist nicht verfügbar. Wenn ich finde, ein guter Weg, um auf der <div> ich werde Bearbeiten Sie diesen Beitrag mit dem, was ich gefunden habe.

BEARBEITEN - Zusätzliche Informationen

Ich glaube nicht, dass ich verwenden würde, die newValueHandler für das, was Sie zu tun versuchen.

Ihnen nicht sagen, wie Sie die Daten aktualisieren, aber Sie sagen, es ist möglicherweise aktualisiert alle 5 Sekunden.

Aber Sie entscheiden, zu aktualisieren, eine Zelle, die Sie hinzufügen könnte, um die rowData-Objekt eine Eigenschaft "origValue', und vor der Aktualisierung der Wert der Zelle, setzen Sie den aktuellen Wert für 'origValue' und legen Sie dann den neuen Wert zu Wert. DANN... Sie konnte die cellClass column-Eigenschaft, mit Hilfe einer callback-Funktion und vergleichen Sie den neuen Wert der 'origValue' und kehren den gewünschten Stil.

Beispiele aus der Dokumentation:

//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']; }
}

Dem params-Objekt für cellClass hat Zugriff auf die row-Daten, und wird in der Lage sein zu vergleichen, die neue und orig Werte.

Es gibt viele Optionen, wenn Sie Sie einmal Graben. Wählen Sie, was Sie denken, ist am besten.

InformationsquelleAutor JohnR

Sieht aus wie Sie sollten in der Lage sein zu verwenden, die newValueHandler das ist ein Attribut für jede Spalte.

Aus der docs:

Wenn Sie möchten, verwenden Sie einfache text-Bearbeitung, aber zu formatieren, dass das Ergebnis in irgendeiner Weise vor dem einfügen in die Zeile, dann können Sie eine newValueHandler der Spalte. Dies ermöglicht es Ihnen, fügen Sie eine zusätzliche überprüfung oder das Gespräch auf den Wert.

newValueHandler einen params-Objekt mit Attributen:

• Knoten: Die grid-Knoten in Frage.
• Daten: in Der Zeile Daten in Frage.
• oldValue: Wenn 'Feld' wird in der Spalte definition, die den Wert enthält, in die Daten vor dem Bearbeiten.
• newValue: der Wert Der Zeichenfolge eingetragen, die in den Standard-editor.
• rowIndex: index des virtualisierten Zeile.
• colDef: Die Spalte definition.
• Kontext: Der Kontext, in den gridOptions. api: Eine Referenz auf das ag-Raster API.

Also etwas entlang der Linien von:

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}
}

InformationsquelleAutor Jarod Moser