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函数中设置该行的样式？

谢谢！

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

Answer 1

（角-UI-格＃3.0.7）最简单的方法是使用CSS悬停样式，只需将以下内容添加到页面的CSS样式中即可完成设置：

＆＃13;

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

＆＃13;

使用ui-grid 3.1.1，上述样式不起作用。我不得不这样做：

{{1}}

Solution borrowed from here

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>

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：如何在鼠标悬停时突出显示行？

4 个答案: