web-dev-qa-db-fra.com

angular-ui-grid: comment surligner une ligne au passage de la souris?

Je souhaite mettre en évidence une ligne entière de la grille angulaire lorsque la souris est au-dessus de celle-ci. 

J'ai essayé de modifier le rowTemplate en ajoutant des callbacks ng-mouseover et ng-mouseleave qui définissent la couleur d'arrière-plan. 

Voici mon modèle de ligne - Je m'attends à ce que les trois premières lignes changent la couleur de la ligne entière en rouge. Mais seule la cellule actuellement sous la souris est modifiée.

<div
    ng-mouseover="rowStyle={'background-color': 'red'}; grid.appScope.onRowHover(this);"
    ng-mouseleave="rowStyle={}"
    ng-style="rowStyle"
    ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
    ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
    class="ui-grid-cell"
    ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
    role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
    ui-grid-cell>
</div>

Comment mettre en évidence une ligne entière sur les événements mouseover? 

Une autre approche que j'ai essayée: utiliser une fonction de rappel pour faire cela - comme l'appScope.onRowHover dans l'exemple. Ici, j'ai la portée de la rangée qui plane. Comment puis-je styler cette ligne dans la fonction onRowHover?

Merci!

Lien vers Plunkr . Je m'attends à ce que la souris survole une cellule de la grille pour que toute la ligne devienne rouge. 

angularjsangular-ui-grid
9
ethan

Ici, c'est ça. J'ai apporté une modification au modèle de ligne . http://plnkr.co/edit/gKqt8JEo2FukS3URRLJ5?p=preview

RowTemplate:

<div ng-mouseover="rowStyle={'background-color': 'red'}; grid.appScope.onRowHover(this);" ng-mouseleave="rowStyle={}">
    <div  ng-style="rowStyle" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
    class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}" ui-grid-cell>
    </div>
</div>
9
SaiGiridhar

(angular-ui-grid # 3.0.7) Le moyen le plus simple est d’utiliser des styles de survol CSS, il vous suffit d’ajouter ce qui suit à vos styles CSS pour la page et vous êtes tous ensemble:

.ui-grid-row:hover .ui-grid-cell {
  background-color: beige;
}

Avec ui-grid 3.1.1, les styles ci-dessus ne fonctionnaient pas. Je devais faire ceci:

.ui-grid-row:nth-child(odd):hover .ui-grid-cell{background:red}
.ui-grid-row:nth-child(even):hover .ui-grid-cell{background:red}

Solution empruntée à partir d'ici

31
Sadjad Abdoli

Il y a un petit problème avec la solution de SaiGiridhar: la sélection en surbrillance cesse de fonctionner car un autre wrapper est ajouté au-dessus de ng-repeat div.

Un petit correctif pour ce serait:

<div ng-mouseover="rowStyle={'background-color': (rowRenderIndex%2 == 1) ? '#76BED6' : '#BFDAE3'};" ng-mouseleave="rowStyle={}" ng-style="selectedStyle={'background-color': (row.isSelected) ? '#379DBF' : ''}">
    <div ng-style="(!row.isSelected) ? rowStyle : selectedStyle" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
        class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}" ui-grid-cell>
    </div>
</div>

Je viens de copier-coller mon code. Il ajoute un style alternatif aux lignes pour les lignes en surbrillance et corrige également la mise en surbrillance des lignes sélectionnées.

J'espère que ça aide quelqu'un.

1
Lentyai

Ceci est plus difficile si la sélection est activée. Utilisez ceci.

// js

   $templateCache.put('ui-grid/ui-grid-row',
            `
            <div 
            ng-mouseenter="row.isHov = true" 
            ng-mouseleave="row.isHov = false" 
            ng-init="row.isHov = false"
            ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
            ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
            class="ui-grid-cell"
            ng-class="{ 'on': row.isHov, 'ui-grid-row-header-cell': col.isRowHeader }"
            role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
            ui-grid-cell>
          </div>
            `
        );

// scss

.ui-grid-cell {


&.on {
    .ui-grid-cell-contents {
        background: red;
    }
}

}

0
httpete