web-dev-qa-db-fra.com

Comment fournir une couleur d'arrière-plan pour une ligne entière de la grille ag basée sur une certaine valeur dans une colonne?

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.

ag-grid
8
Akshay

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

13
tfrascaroli

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;
    }
}
3
Jeff Papineau

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)'}
       }
    };
1
Jatin Kakkar

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.

0
Charlie H