Je dois fournir une couleur d'arrière-plan pour toute une ligne de la grille ag basée sur une condition d'une colonne. Je n'ai trouvé aucun exemple dans lequel une ligne entière est colorée en fonction d'une certaine valeur dans une colonne.
La réponse précédente est quelque peu dépassée (bien que toujours correcte et fonctionnelle) et nous avons maintenant un peu plus de contrôle sur le style de la grille. Vous pouvez utiliser getRowStyle(params)
pour ce travail, juste comme ceci:
gridOptions.getRowStyle(params) {
if (params.data.myColumnToCheck === myValueToCheck) {
return {'background-color': 'yellow'}
}
return null;
}
De toute évidence, myColumnToCheck
serait la colonne sur laquelle vous vérifiez votre valeur (le même nom que vous entrez dans la propriété id/field de l'objet colDef), et myValueToCheck
serait la valeur que vous souhaitez que ladite colonne ait pour positionner la ligne en jaune. .
La réponse 2 est correcte, mais la syntaxe utilisée est fausse et m'a causé plusieurs problèmes pour essayer de la résoudre. Essayer de minimiser le code de réponse 2 barfed, par exemple. Cela a fonctionné, mais ce n'est pas une syntaxe correcte, à ma connaissance.
Notez que cela peut être fait en ligne ou avec une fonction externe De 2 manières différentes:
FONCTION SÉPARÉE:
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;
};
EN LIGNE:
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;
}
}
Je mets une couleur différente pour les lignes paires et impaires, vous pouvez le faire de quelque manière que ce soit ..
$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)'}
}
};
Vous ne pouvez pas changer la couleur d'arrière-plan d'une ligne entière en une seule commande. Vous devez le faire via la configuration du rappel cellStyle
dans la variable columnDefs
. Ce rappel sera appelé pour chaque cellule de la ligne. Vous devez modifier la couleur de la ligne en modifiant la couleur de toutes les cellules.
Voir la définition de colonne suivante
{
headerName: "Street Address", field: "StreetAddress", cellStyle: changeRowColor
}
Vous devez le faire pour toutes vos colonnes.
Voici votre fonction changeRowColor
.
function changeRowColor(params) {
if(params.node.data[4] === 100){
return {'background-color': 'yellow'};
}
}
Cela change la couleur d'une ligne si la valeur de la troisième cellule est 100.