Comment la couleur de la ligne sur valeur spécifique dans angular-ui-grille?

Je suis en train de la couleur d'une ligne en fonction de sa valeur dans la nouvelle angular-ui-grille 3.0 rc12 mais je n'ai pas pu. Le code suivant dans la version précédente (ngGrid):

$scope.gridOptions =
    data: 'data.sites'
    tabIndex: -1
    enableSorting: true
    noTabInterference: true
    enableColumnResizing: true
    enableCellSelection: true
    columnDefs: [
      {field: 'sv_name', displayName: 'Nombre'}
      {field: 'sv_code', displayName: 'Placa'}
      {field: 'count', displayName: 'Cuenta'}
    ]
    rowTemplate: """<div ng-class="{green: true, blue: row.getProperty('count') === 1}"
                         ng-repeat="col in colContainer.renderedColumns track by col.colDef.name"
                         class="ui-grid-cell"
                         ui-grid-cell></div>"""

et le css correspondant:

.grid {
  width: 100%;
  height: 250px;
}

.green {
  background-color: #2dff07;
  color: #006400;
}

.blue {
  background-color: #1fe0f0;
  color: #153ff0;
}

Le problème ici est que l'expression:

row.getProperty('count') === 1

Ne fonctionne plus comme il le faisait dans ngGrid. Une diée de la façon de réaliser les mêmes dans angulaire de l'interface utilisateur-réseau (ui-grid.info)

Merci beaucoup!

InformationsquelleAutor tebanep | 2014-10-14

33

La nouvelle interface utilisateur-réseau a une propriété spéciale pour le cellClass:
```
  $scope.gridOptions = {
    enableSorting: true,
    data:'myData',
    columnDefs: [
      { field: 'sv_name', displayName: 'Nombre'},
      {field: 'sv_code', displayName: 'Placa'},
      { field: 'count', displayName: 'Cuenta',
        cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
          if (grid.getCellValue(row,col) == 1) {
            return 'blue';
          }
          return 'green';
        }
      }
    ]
  };
```
Coup d'oeil à sa Plunker

Noter que j'ai fait de la couleur pour la classe vert dans rouge parce que c'est mieux à voir et à remuer maximale de confusion:-)

Mise à jour:

Voici la solution pour ligne coloriage.

Écrire votre rowTemplate comme ceci:
```
  var rowtpl='<div ng-class="{\'green\':true, \'blue\':row.entity.count==1 }"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>';
```
Ici est la fourche Plunker

Noter que couleur de fond est remplacée par la cellule de milieux. Trouver un moyen de contourner cela par vous-même:-)

Désolé pour la période initiale de mal lu votre question. Je laisse le cellClass partie dans cette réponse, dans le cas où tout le monde a besoin d'elle.
- Heu, j'ai juste remarqué que vous demandez pour l'ensemble de la ligne. Ignorer mon stoopid réponse pour l'instant. Je vais voir ce que je peux trouver et de vous donner une mise à jour.
- J'ai mis à jour ma réponse.
- Merci beaucoup! Il fonctionne parfaitement. Vous m'a vraiment sauvé de beaucoup de maux de tête 🙂
- comment voulez-vous vérifier la valeur de la cellule courante ainsi que d'une autre cellule de la même ligne avant de revenir en bleu dans l'exemple ci-dessus? J'ai besoin de vérifier que les deux "de la grille.getCellValue(ligne,col) == 1" et "sv_name" de la même ligne est égal à "tester" avant de me remettre "bleu".
- Utilisation: si le (la grille.getCellValue(ligne,col) == 1 && ligne.de l'entité.sv_name == "Test"). Avec ligne.entitity vous pouvez accéder à tous les membres de la ligne objet. Voici la plunker: plnkr.co/modifier/0JbjXIp8ipKV310g1k7D?p=preview
- Voici le modèle pour la ligne de coloration trop: var rowtpl='<div ng-classe="{\"green\':true, \'bleu\':(rangée.de l'entité.count==1 && ligne.de l'entité.sv_name ==\ " Test\')}"><div ng-repeat="(colRenderIndex, col) dans colContainer.renderedColumns de la piste par le col.colDef.name" class="ui-grille-cellule" ng-classe="{ \'interface utilisateur-réseau-ligne d'en-tête de cellule\': col.isRowHeader }" ui-grille-cellule></div></div>'; Et c'est ici la plunker: plnkr.co/modifier/e7lxlRKDt4GCj2twUguH?p=preview Merci à Gabriel pour le CSS fixer!
- mais lorsque la valeur de la comparaison avec la grille.getCellValue(ligne,col) est à seulement reçu après $http appel, le changement de couleur ne se fait pas depuis sa ajax. Je l'ai mentionné que ci-dessous ainsi stackoverflow.com/a/32247092/2658127 .Des idées à ce sujet?
InformationsquelleAutor mainguy
15

Noter que couleur de fond est remplacée par la cellule de milieux. Trouver un moyen de contourner cela par vous-même:-)

Basée sur la réponse précédente, si vous souhaitez remplacer la couleur d'arrière-plan à un niveau ligne, vous pouvez utiliser ceci:
```
.ui-grid-row .ui-grid-cell {
   background-color: inherit !important;
}
```
InformationsquelleAutor Gabriel Dinant
7

Vous pouvez tout simplement utiliser la classe css spécifique
```
.invalidated {
background-color: #f2dede !important;
}
```
et ajouter ng-classe sur la ligne du modèle de div avec "invalidé" champ ou appeler une fonction (exemple dans plnkr):
```
<div ng-class="{invalidated: row.entity.invalidated}"
```
Ici est la plunkr http://plnkr.co/edit/syuRZorj0nGq3B9p3U1h?p=preview

Espère que ça aide.
- l'ajout de la !important a fait le tour pour moi, ou bien class sera pas surdéfini..
InformationsquelleAutor Patrik Bego
2

S'il vous plaît essayer cette
see the code here
http://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=info.

J'ai couvert beaucoup de scénario à base de cellules de couleurs comme.
1. Les valeurs négatives de la cellule affichera en ROUGE
2. Sale cellules de couleur JAUNE.
3. Cellules modifiables sera BLANC
4. Non modifiable cellules seront GRIS
5. Valeur totale des cellules sera DARKGREYED
Lui donner un essai. Peut-être vous pouvez saisir un peu de connaissances et d'idées à partir de là.
- Que faire si la valeur de "MY_CONSTANTS", les valeurs qui vous permet de comparer changer la couleur de la cellule, est reçu après un $http appel? Ce qui signifie que vous tapez une valeur dans le champ, puis, après la modification, il déclenche l' $http appel, puis vous créez votre "MY_CONSTANTS" avec le renvoi de données à partir de $http, puis faire la comparaison de la valeur dans la même cellule avec les valeurs "MY_CONSTANTS", et changer la couleur en fonction de la validation.
- Lors de la modification que vous pourriez avoir besoin de stocker la ligne infos sur l'entité par une fermeture. et une fois que votre $requête http renvoie la valeur même de la fermeture peut accéder à votre dernière édition de ligne infos sur l'entité. et puis vous n'avez qu'à publier l'événement à notifier les modifications apportées au cadre à l'aide de 'gridApi.de base.notifyDataChange' API. Note: $http appel doit être à l'intérieur de la clôture où vous stockez les infos sur l'entité.
- En fait, j'ai été en mesure de le faire à l'aide de cellTemplate de la fonction ou même avec rowTemplate sans avoir à faire tout " gridApi.de base.notifyDataChange' appel d'API.
- Génial!. Il serait utile si vous pouviez en mesure de créer un plunker et de partager. Merci.
- voici l'exemple de plnkr.co/modifier/bVieULC1SPjLZwY4OzWJ?p=preview
- La modification de la ligne ou de la cellule de modèles ne doit pas être la première solution à un problème comme celui-ci, car il peut casser des choses lorsque vous mettez à jour vers une version ultérieure angulaire version.
InformationsquelleAutor Naushad KM
1

@Naushad KM et si quelqu'un avez à faire en temps réel de la cellule de validation après un $http appel.

C'est ce qu'il fait:
1. De la saisie d'une valeur modifiable ligne.
2. Sur l'accent en vrac (flou), fait un $http appel.
3. Valide la valeur d'entrée avec les données renvoyées.
4. Valeur valide sera VERT, invalide sera ROUGE.
Example: Plunker

InformationsquelleAutor Rajush

Vous devez vous connecter pour publier un commentaire.