Wie wird eine Hintergrundfarbe für eine ganze Zeile in einem ag-Raster basierend auf einem bestimmten Wert in einer Spalte bereitgestellt?

Question

Ich muss eine Hintergrundfarbe für eine ganze Zeile in ag Raster basierend auf einer Bedingung in einer Spalte bereitstellen. Ich habe keine Beispiele gefunden, bei denen die gesamte Zeile basierend auf einem bestimmten Wert in einer Spalte farbig ist.

Answer 1

Die vorherige Antwort ist etwas veraltet ist (obwohl immer noch richtig und in Betrieb) und wir haben jetzt etwas mehr Kontrolle über die Styling des Gitters. Sie könnten getRowStyle(params) für diesen Job verwenden, so wie diese:

gridOptions.getRowStyle(params) { 
    if (params.data.myColumnToCheck === myValueToCheck) { 
     return {'background-color': 'yellow'} 
    } 
    return null; 
} 

Offensichtlich myColumnToCheck wäre die Spalte, die Sie Ihren Wert gegenüber sind die Überprüfung (dem gleichen Namen Eingabe im id/Feldeigenschaft des COLDEF Objekt) und myValueToCheck wäre der Wert, den die Spalte haben soll, um die Zeile gelb zu machen.

Answer 2

Sie können die Hintergrundfarbe einer ganzen Zeile nicht in einem Befehl ändern. Sie müssen es über die cellStyle Callback-Setup in der columnDefs tun. Dieser Rückruf wird für jede Zelle in der Zeile aufgerufen. Sie müssen die Farbe der Zeile ändern, indem Sie die Farbe aller Zellen ändern.

Auch die folgenden Spaltendefinition

{ 
    headerName: "Street Address", field: "StreetAddress", cellStyle: changeRowColor 
} 

Sie müssen dies für alle Spalten tun.

Hier ist Ihre changeRowColor Funktion.

function changeRowColor(params) { 

    if(params.node.data[4] === 100){ 
     return {'background-color': 'yellow'};  
    } 

} 

Es ändert sich die Farbe einer Zeile, wenn der Wert der dritten Zelle 100

Answer 3

Antwort 2 ist korrekt, aber die Syntax ist falsch, und verursachte mir mehrere Probleme, um es zu sortieren. Versuchen, den Antwortcode 2 zu minimieren, zum Beispiel. Es hat funktioniert, aber es ist nicht die richtige Syntax, soweit ich sehen kann.

Hinweis kann diese inline erfolgen, oder mit einer externen Funktion, 2 verschiedene Möglichkeiten:

eigene Funktion:

vm.gridOptions = { 
    columnDefs: columnDefs, 
    getRowStyle: getRowStyleScheduled 
} 

function getRowStyleScheduled(params) { 
    if (params.selected && params.data.status === 'SCHEDULED') { 
     return { 
      'background-color': '#455A64', 
      'color': '#9AA3A8' 
    } 
    } else if (params.data.status === 'SCHEDULED') { 
     return { 
      'background-color': '#4CAF50', 
      'color': '#F4F8F5' 
     }; 
    } 
    return null; 
}; 

INLINE:

vm.gridOptions = { 
    columnDefs: columnDefs, 
    getRowStyle: function(params) { 
     if (params.selected && params.data.status === 'SCHEDULED') { 
      return { 
       'background-color': '#455A64', 
       'color': '#9AA3A8' 
      }; 
     } else if (params.data.status === 'SCHEDULED') { 
      return { 
       'background-color': '#4CAF50', 
       'color': '#F4F8F5' 
      }; 
     } 
     return null; 
    } 
} 

Answer 4

ich andere Farbe gesetzt für gerade und ungerade Reihen können Sie es in keiner Weise tun.

$scope.gridOptions.getRowStyle = function getRowStyleScheduled(params){  
     if(parseInt(params.node.id)%2==0) { 
      return {'background-color': 'rgb(87, 90, 90)'} 
     }else { 
      return {'background-color': 'rgb(74, 72, 72)'} 
     } 
    };