Angular Ui-网格：突出显示固定列的整行

Question

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

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

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

这里是傻瓜：http://plnkr.co/edit/HPxrc68JNMqyp4G9xLFA?p=preview。

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

谢谢！

Answer 1

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

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');
    });
};

Angular Ui-网格：突出显示固定列的整行

Angular Ui-Grid: Highlight entire row with pinned column

css

angularjs

ui-grid