Angular UI-Grid: Hover auf erweiterbare Zeile

Ich versuche, einen Hover-Effekt auf die Zeilen eines Angular-Ui-Gitters zu implementieren. Wenn der Benutzer irgendwo in der Zeile schwebt, sollte die komplette Zeile die Hintergrundfarbe ändern. Ich verwende jedoch das erweiterbare Raster, das automatisch einen Zeilenkopf mit dem Erweiterungssymbol erstellt. Jetzt färben die CSS-Regeln entweder den Zeilenkopfbereich oder den Datenbereich, aber niemals die komplette Zeile.Angular UI-Grid: Hover auf erweiterbare Zeile

Dies ist der Hover-Effekt auf den Zeilenkopf:

Dies ist der Hover-Effekt auf einer anderen Spalte:

Hat jemand eine Lösung dafür finden?

Quelle

2016-04-04 Tobias

Ich habe Ihr Problem nicht vollständig bekommen. Kannst du bitte die letzte Zeile umformulieren? Grundsätzlich bekomme ich nicht das gewünschte Verhalten, das Sie für das erweiterte Gitter erwarten. – SaiGiridhar

Ich habe versucht, umzuschreiben und Screenshots hinzugefügt. Bitte schau es dir nochmal an! – Tobias

Haben Sie versucht, <... ng-mouseover = "rowStyle = {\ 'background-color \': \ 'red \'} hinzuzufügen?" ng-mouseleave = "rowStyle = {}" ...> zu Ihrer Zeilen- und erweiterten Zeilenvorlage? –

Hier ist, was ich getan habe:

Im rechten Teil der Tabelle, ich folgendes an die Zell Vorlage hinzugefügt:

<div class="ui-grid-cell-contents" 
    ng-class="{ 'ui-grid-cell-hover': (grid.appScope.hoverRow == row.uid) }" 
    ng-mouseenter="grid.appScope.hoverRow = row.uid" 
    ng-mouseleave="grid.appScope.hoverRow = undefined">

den linken Teil abzudecken, änderte es die expandableRowHeader Vorlage (im Vorlagen-Cache, da es nicht extern belichtet wird):

Ich mag diese Lösung nicht. Erstens mag ich es nicht, eine Komponente von Drittanbietern zu patchen. Zweitens reagiert der Schwebeflug langsam: Es dauert eine halbe Sekunde bis zwischen Schweben und Farbwechsel.

Also, falls jemand eine bessere Lösung hat, bitte posten Sie es hier.

Quelle

2016-04-11 12:49:16 Tobias

Angular UI-Grid: Hover auf erweiterbare Zeile

Antwort

Verwandte Themen