Question

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

问题是ui-grid创建了两个不同的元素，一个用于固定列，另一个用于＆＃34;常规＆＃34;那些。所以我不知道如何一次突出显示整行，而且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添加内容就会破坏整个表格。

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-Grid：使用固定列突出显示整行

1 个答案: