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

【问题标题】：angular-ui-grid: how to highlight row on mouseover?angular-ui-grid：如何在鼠标悬停时突出显示行？
【发布时间】：2016-02-29 21:15:11
【问题描述】：

当鼠标在它上面时，我想突出显示一整行 angular-ui-grid。

我尝试通过添加设置背景颜色的 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 函数中设置该行的样式？

谢谢！

Link to Plunkr。我希望将鼠标悬停在网格单元上会使整行变为红色。

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案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}

Solution borrowed from here

【讨论】：

其他答案提供的解决方案有问题，但这个很简单而且效果很好。太简单。谢谢
进一步简化事情，如果您不需要更改突出显示，因为该行是偶数或奇数，那么您可以这样做.ui-grid-row:hover .ui-grid-cell{background:red}。都是一样的
使用 ngGrid，你可以使用 .ngRow:nth-child(odd):hover .ngCell{background: red} .ngRow:nth-child(even):hover .ngCell{background:红色}
效果很好。有人找到适用于固定列的解决方案吗？

【解决方案2】：

在这里，是吗。我在行模板中进行了更改。 http://plnkr.co/edit/gKqt8JEo2FukS3URRLJ5?p=preview

行模板：

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

【讨论】：

我会使用ng-class 而不是ng-style，但逻辑是一样的。
谢谢！我的理解是外部 div 包含整行，而内部 div 扩展到行中的每个单元格。对吗？

【解决方案3】：

SaiGiridhar 的解决方案有一个小问题：选择突出显示停止工作，因为在 ng-repeat div 之上添加了另一个包装器。

一个小的修复方法是：

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

我刚刚复制粘贴了我的代码。它为突出显示的行添加替代行样式，并修复选定的行突出显示。

希望对某人有所帮助。

【讨论】：

【解决方案4】：

如果您启用了选择，这会更难。使用这个。

//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;
    }
}

}

【讨论】：