角度Uiグリッド：固定列の行全体をハイライト表示

Question

私はuiグリッドを使用しています。最初の列は左に固定する必要があります。ユーザーが1つの行を移動すると、行全体が強調表示されますが、これは論理的なことです。

問題は、ui-gridが2つの異なる要素を作成することです.1つは固定列用で、もう1つは「通常の」要素用です。だから私は一度に行全体をハイライトする方法を知らないし、CSSを使ったソリューションはうまくいきません。

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

ここでは、plunker：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'); 
    }); 
};