Угловая Ui-сетка: Выделите весь ряд с закрепленной колонкой

Question

Я использую ui-сетку, а первый столбец должен быть закреплен слева. Когда пользователь наводится на одну строку, я хочу выделить всю строку, что является логической задачей.

Проблема в том, что ui-grid создает два отдельных элемента: один для закрепленного столбца, а другой - для «обычных». Поэтому я не знаю, как выделить всю строку сразу, а решения с CSS не работают.

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

Plunker здесь: http://plnkr.co/edit/HPxrc68JNMqyp4G9xLFA?p=preview.

Вы знаете, как это сделать? В идеале просто с настройками ui-grid и CSS.

Спасибо!

Answer 1

Я решил это! Я использовал шаблон строки, который захватывает идентификатор строки, определяет 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'); 
    }); 
};