angular-ui-grid: jak wyróżnić wiersz po najechaniu kursorem myszy?

Question

Chcę podświetlić cały rząd siatki kątowej, gdy mysz znajduje się na wierzchu.

Próbowałem zmodyfikować wierszTemplate, dodając wywołania zwrotne ng-mouseover i ng-mouseleave, które ustawiają kolor tła.

Oto mój wierszTemplate - oczekuję, że pierwsze trzy linie zmienią cały kolor wiersza na czerwony. Ale zmienia się tylko komórka aktualnie pod myszą.

<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> 

Jak wyróżnić cały wiersz w przypadku zdarzeń najechania kursorem myszy?

Inne podejście, które próbowałem: używając funkcji wywołania zwrotnego, wykonaj to - podobnie jak appScope.onRowHover w przykładzie. Tutaj mam zakres rzędu, na którym się znajdujemy. Jak mogę stylizować ten wiersz w ramach funkcji onRowHover?

Dzięki!

Link to Plunkr. Spodziewam się, że przeskoczę nad komórką siatki, aby cały wiersz był czerwony.

Answer 1

Tutaj, jest. Wprowadziłem zmianę w szablonie wiersza. 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> 

Answer 2

(kątowe-ui-grid # 3.0.7) Najprostszym sposobem jest użycie stylów CSS wskaźnikiem, wystarczy dodać następujące do stylów CSS dla strony i jesteś cały zestaw:

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

---

Z ui-grid 3.1.1 powyższe style nie działają. Musiałem to zrobić:

.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 borrowed from here

Answer 3

Jest mały problem z rozwiązaniem SaiGiridhar: wybór podkreślając przestaje działać, ponieważ inny owinięcie jest dodawany na górze NG-repeat div.

Mała poprawka dla byłoby:

<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> 

Właśnie kopiowaniem wklejony mój kod. Dodaje alternatywne style wiersza dla zaznaczonych wierszy, a także poprawia zaznaczenie zaznaczonego wiersza.

Mam nadzieję, że komuś pomaga.