Couleur personnalisée de la ligne sélectionnée dans angular-ui-grille

Je veux changer la cellule/ligne couleurs de l'angulaire de l'interface utilisateur-réseau. À partir de la documentation, il semble que je devrais utiliser le cellClass pour cela. J'en veux deux couleurs pour un look rayé et une autre couleur pour la ligne sélectionnée.

Dans mon columnDefs j'utilise une fonction pour déterminer le bon cellClass. Cela fonctionne parfaitement sur la première charge.

$scope.getCellClass = function (grid, row, col, rowRenderIndex, colRenderIndex) {
    if (row.isSelected)
        return 'my-grid-cell-selected';

    if ((rowRenderIndex % 2) == 0) {
        return 'my-grid-cell1';
    }
    else {
        return 'my-grid-cell2';
    }
}

$scope.gridOptions = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,        
    multiSelect: false,
    columnDefs: [
      { field: 'EventDate', cellClass: $scope.getCellClass },
      ...
    ]
};

Je ne sais pas, cependant, comment mettre à jour le cellClass de toutes les cellules de la ligne sélectionnée.
J'ai le code suivant qui me semblait de mise à jour de la ligne sélectionnée mais rien ne se passe même si je peux voir qu'il est appelé.

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;

    gridApi.selection.on.rowSelectionChanged($scope, function(row){
        //??????
        gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW);
    });

};

Sans mon cellClasses la ligne sélectionnée devient coloré différemment.

Aucune idée comment faire pour obtenir une couleur personnalisée pour la ligne sélectionnée?

OriginalL'auteur NicolasR | 2015-08-28

  1. 2

    Le meilleur et le plus simple à mon avis est d'utiliser le l'interface utilisateur de la grille de customizer!

    Précisément ce que vous cherchez à changer la couleur d'arrière-plan pour bizarre vs même des lignes est de changer le @rowcoloreven et @rowcolorodd champs.

    Pour changer la couleur de la ligne sélectionnée, la mise à jour dans le customizer @focusedcell de la propriété et, en outre, suivre ce tutoriel et/ou de regarder le deuxième contrôleur dans cette plunker pour étendre votre sélection à partir d'une cellule unique à l'ensemble de la ligne.

    J'ai également créé une nouvelle plunker qui montre comment mettre en oeuvre la ligne de sélection ainsi que la façon de changer la couleur de ligne par défaut. Oui je sais c'est vraiment criardes coloriage - j'ai pensé qu'il serait utile pour vraiment obtenir le point à travers :). Vous pouvez le voir dans la coutume.css ce qui est réellement différent du non personnalisé de l'interface utilisateur-réseau css est 

    .ui-grid-row:nth-child(odd) .ui-grid-cell {
  background-color: #ffff33;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
  background-color: #ff22ff;
} 



.ui-grid-cell-focus {
  outline: 0;
  background-color: #b3c4c7;
}

    Si vous avez besoin de plus d'orientation laissez-moi savoir 🙂

    Merci pour toutes ces informations, ce qui semble être une bien meilleure façon de le faire. Le css de la sortie de la Customizer semble être de moins en MOINS de code, je ne suis pas familier avec. J'ai essayé de le compiler avec l'un de disponibles en ligne MOINS compilateurs, mais elle ne se termine jamais dans un pur fichier css comme le vôtre, aussi mon fichier css séjours à seulement 958 lignes. Comment voulez-vous créer votre custom.css de la personnalisation?
    Salut @NicolasR j'ai changé les variables ici et puis cliqué sur "Télécharger Css" bouton en haut à gauche de la page. Puis j'ai copié la sortie et collé dans le .fichier css que j'ai créé dans le plunker nommée "personnalisé.css".
    C'est vraiment étrange. Pourriez-vous vérifier avec un éditeur de texte le nombre de lignes de la "Télécharger Css" produit pour vous? Pour moi, c'est toujours 958 lignes.
    Collé dans Notepad++ et j'ai 958 avant toute modification et en 1955 et après j'ai fait les modifications mentionnées ci-dessus. Voir la note en haut de la customizer Le customizer actuellement ne fonctionne qu'avec MOINS défini pour la base. Moins pour les fonctionnalités ne sont pas actuellement incluses dans le téléchargement inclus. Il semble qu'ils ont établi leur base css avec MOINS, mais une fois que vous apportez une modification à la personnalisation, il n'est plus entièrement compatible et si vous obtenez le "pur" fichier css. Voir ici pour plus de détails sur MOINS d'Éléments
    Je ne sais pas ce que je fais mal, mais quoi que je fasse avec le customizer, je n'ai jamais eu plus de 958 lignes pour le télécharger et il ne contient la couleur j'ai mis pour @focusedCell. De toute façon, je vais utiliser vos css et mis mes couleurs.

    OriginalL'auteur laurenOlga

  2. 7

    Voici la façon de le faire avec CSS:

    .ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell {
  color: #fff;
  background-color: blue;
} 

.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell.ui-grid-cell-focus,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell.ui-grid-cell-focus {
  outline: 0;
  background-color: blue;
} 

.ui-grid-row-selected.ui-grid-row:nth-child(odd):hover .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even):hover .ui-grid-cell {
  color: #fff;
  background-color: blue;
}
    Cela fonctionne, je vous remercie. Comment avez-vous obtenu ce résultat? J'ai été en utilisant le personnalisateur de la variable: '@focusedCell' de nombreuses façons différentes. J'ai été en mesure de remplacer tout le reste. Veuillez expliquer comment est venu à cette réponse. Merci à l'avance.
    Cette juste remplace ce qui a été défini dans la grille CSS - vous voulez que la couleur soit la même si elle est sélectionnée, peu importe si la ligne est pair ou impair, et si elle est sélectionnée ET a plané ET/OU concentré. Cela semblait couvrir toutes ces bases sans avoir à écrire de plus sur le javascript. J'ai joué un peu avec les variables, mais n'a jamais été en mesure d'obtenir le comportement que je voulais avec eux. La accepté de répondre ne couvre pas le vol stationnaire comportement, donc je ne sais pas pourquoi, laquelle a été acceptée...
    j'ai dû ajouter !important, car il n'était pas primordial pour une raison quelconque.

    OriginalL'auteur Devin McQueeney