web-dev-qa-db-fra.com

Comment colorer la ligne sur une valeur spécifique dans la grille angulaire-ui?

J'essaie de colorer une ligne en fonction de sa valeur dans le nouveau angular-ui-grid 3.0 rc12 mais je n'ai pas pu. Le code suivant fonctionnait 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 dans ngGrid. Toutes les suppositions sur la façon d'atteindre le même dans angular-ui-grid ( i-grid.info )

Merci beaucoup!

javascripthtmlcssangularjsangular-ui-grid
19
tebanep

La nouvelle ui-grid 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';
        }
      }
    ]
  };

Regardez son Plunker

Notez que j'ai fait la couleur pour la classe vert en rouge parce que c'est mieux pour voir et susciter une confusion maximale :-)

Mise à jour:

Voici la solution pour la coloration des lignes.

Écrivez votre modèle de ligne 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>';

Voici le Plunker fourch

Notez que la couleur d'arrière-plan est remplacée par les arrière-plans des cellules. Trouvez un moyen de contourner cela par vous-même :-)

Désolé pour la mauvaise lecture initiale de votre question. Je laisse la partie cellClass dans cette réponse au cas où quelqu'un en aurait besoin.

34
mainguy

Notez que la couleur d'arrière-plan est remplacée par les arrière-plans des cellules. Trouvez un moyen de contourner cela par vous-même :-)

Sur la base de la réponse précédente, si vous souhaitez remplacer la couleur d'arrière-plan au niveau d'une ligne, vous pouvez utiliser ceci:

.ui-grid-row .ui-grid-cell {
   background-color: inherit !important;
}
15
Gabriel Dinant

Vous pouvez simplement utiliser une classe CSS spécifique

.invalidated {
background-color: #f2dede !important;
}

et ajoutez ng-class sur le modèle de ligne div avec le champ 'invalidated' ou appelez une fonction (l'exemple est dans plnkr):

<div ng-class="{invalidated: row.entity.invalidated}"

Voici le plunkr http://plnkr.co/edit/syuRZorj0nGq3B9p3U1h?p=preview

J'espère que ça t'as aidé.

7
Patrik Bego

Veuillez essayer ceci
see the code herehttp://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=info .
J'ai couvert de nombreuses couleurs de cellules basées sur des scénarios comme.

  1. La cellule des valeurs négatives s'affichera en ROUGE
  2. Les cellules sales seront JAUNES.
  3. Les cellules modifiables seront BLANCHES
  4. Les cellules non modifiables seront GRISES
  5. Les cellules de valeur totale seront GRISES FONCÉES

Essaie. Peut-être que vous pouvez y acquérir des connaissances/idées.

2
Naushad KM

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

Voilà ce qu'il fait:

  1. Entrez une valeur dans une ligne modifiable.
  2. Sur focus lâche (flou), effectue un appel $ http.
  3. Valide la valeur d'entrée avec les données renvoyées.
  4. La valeur valide sera VERTE, invalide sera ROUGE.

Example: Plunker

1
Rajush