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

Question

我想在鼠标悬停在 angular-ui- 网格上时突出显示整行。

我试图通过添加设置背景颜色的 ng-mouseover 和 ng-mouseleave 回调来修改 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。我希望将鼠标悬停在网格单元格上会将整行变为红色。

Answer 1

在这儿，是吗。我对行模板进行了更改。 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>

Answer 2

(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

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

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

希望对大家有所帮助。

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

}

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

angular-ui-grid: how to highlight row on mouseover?

angularjs

angular-ui-grid