açısal-ui-grid: mouseover üzerinde satır vurgulamak nasıl?

Question

Fare üstündeyken tüm köşeli-ui-grid satırını vurgulamak istiyorum.

Arka plan rengini ayarlayan ng-mouseover ve ng-mouseleave geri çağrıları ekleyerek rowTemplate'i değiştirmeye çalıştım.

İşte rowTemplate - Satır renginin tümünü kırmızıya çeviren ilk üç satırı bekliyorum. Ama şu anda sadece farenin altındaki hücre değişiyor.

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

Fare geçişi olaylarındaki tüm satırı nasıl vurgularım?

Denediğim başka bir yaklaşım: bazı geriçağırım işlevlerini kullanarak bunu yapın - örnekteki appScope.onRowHover gibi. Burada, üzerinde durmakta olan satırın kapsamı var. OnRowHover işlevi içindeki satırı şekillendirmeye nasıl başlarım?

Teşekkürler!

Link to Plunkr. Tüm satırı kırmızıya çevirmek için bir ızgara hücresinin üzerinde dolaşmayı bekliyorum.

Answer 1

İşte, öyle. Satır şablonunda değişiklik yaptım. 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

kolay yolu CSS vurgu stillerini kullanmaktır

(# 3.0.7 açısal-ui-grid), sadece eklemek sayfa ve nerede için CSS stilleri için aşağıdaki tüm kümesi:

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

---

Ui-grid 3.1.1 ile yukarıdaki stiller çalışmadı. Bunu yapmak zorunda:

.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

SaiGiridhar çözümünde ile küçük bir sorun var: Seçim başka sarıcı ng-tekrarı div üstünde eklenir beri çalışan durur vurgulayarak. olurdu için

küçük düzeltme:

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

Ben sadece kod-yapıştırılan kopya ettik. Vurgulanan satırlar için alternatif satır stilleri ekler ve seçilen satır vurgulamayı da düzeltir.

Birilerine yardım edeceğini umarız.