Angular Ui-Grid：使用固定列突出显示整行答案

【问题标题】：Angular Ui-Grid: Highlight entire row with pinned columnAngular Ui-Grid：使用固定列突出显示整行
【发布时间】：2016-12-14 18:46:44
【问题描述】：

我正在使用 ui-grid，第一列必须固定在左侧。当用户悬停在一行上时，我想突出显示整行，这是合乎逻辑的事情。

问题在于 ui-grid 创建了两个不同的元素，一个用于固定列，另一个用于“常规”列。所以我不知道如何一次突出显示整行，并且使用 CSS 的解决方案不起作用。

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

Plunker：http://plnkr.co/edit/HPxrc68JNMqyp4G9xLFA?p=preview。

你知道怎么做吗？理想情况下，只需使用 ui-grid 设置和 CSS。

谢谢！

【问题讨论】：

标签： css angularjs ui-grid

【解决方案1】：

我解决了！我使用了一个获取行 ID 的行模板，定义了填充行中所有单元格背景的 ng-mouseover 和 ng-mouseout 函数。无论出于何种原因，我不得不将整个模板包装在 div 中，只需在模板的 class 中添加一些内容就会破坏整个表格。

rowTemplate的内容：

<div class="row-uid-{{row.uid}}">
    <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
         ng-mouseover="grid.appScope.onRowHover(row.uid);"
         ng-mouseout="grid.appScope.onRowOut(row.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>

控制器新增功能：

 $scope.onRowHover = function (rowUid) {
    _.each(angular.element('.row-uid-' + rowUid + ' .ui-grid-cell-contents'), function (row) {
           angular.element(row).css('background-color', 'red');
    });
};

$scope.onRowOut = function (rowUid) {
    _.each(angular.element('.row-uid-' + rowUid + ' .ui-grid-cell-contents'), function (row) {
      angular.element(row).css('background-color', 'white');
    });
};

【讨论】：