angular-ui-grid:如何在鼠标悬停时突出显示行？

Question

我想在鼠标位于其上方时突出显示整行的角度ui网格.

我试图通过添加设置背景颜色的ng-mouseover和ng-mouseleave回调来修改rowTemplate.

这是我的rowTemplate - 我希望前三行将整个行颜色更改为红色.但只有当前鼠标下的单元格才会发生变化.

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

如何在鼠标悬停事件中突出显示整行？

我尝试的另一种方法:使用一些回调函数执行此操作 - 例如示例中的appScope.onRowHover.在这里,我有行的范围.如何在onRowHover函数中设置该行的样式？

谢谢!

链接到Plunkr.我希望将鼠标悬停在网格单元格上以将整行变为红色.

Answer 1

(angular-ui-grid#3.0.7)最简单的方法是使用CSS悬停样式,只需将以下内容添加到页面的CSS样式中即可完成设置:

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

使用ui-grid 3.1.1,上述样式不起作用.我不得不这样做:

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

从这里借来的解决方案

Answer 2

就这个.我在行模板中进行了更改. 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>