각도 Ui-Grid : 고정 된 열로 전체 행 강조 표시

Question

저는 ui-grid를 사용하고 있으며 첫 번째 열은 왼쪽에 고정해야합니다. 사용자가 한 행을 가리키면 전체 행을 강조 표시해야하는데 이는 논리적 인 작업입니다.

문제는 ui-grid가 고정 된 열과 고정 된 두 가지 요소를 생성한다는 것입니다. 따라서 전체 행을 한 번에 강조 표시하는 방법을 모르며 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'); 
    }); 
};