角度uiグリッドは、セルのクリックで全行をハイライト表示

Question

それは単純なタスクのように見えますが、私はすでに解決策を見つけるのに4時間を費やしました。セルのクリックで行全体をどのように強調表示できますか？私は解雇されたが、私は、行に色を強制することはできませんし、私は、チェックボックスを使用しているため、私は、行を選択する必要はありませんどのようにセルをクリックしてご覧ください、私は次の

$scope.gridOptions.onRegisterApi = function(gridApi){ 
     $scope.gridApi = gridApi; 
     gridApi.cellNav.on.navigate($scope,function(selected){ 

      if('.ui-grid-cell-focus '){ 
      console.log("fired class") 
       $(selected.row.entity).addClass('ui-grid-cell-focus') 
         } 

      console.log("fired cell") 
         $(selected.row.entity).addClass('ui-grid-cell-focus') 

      }); 
    }; 

を持つレジスタAPIに

この目的のために選択するには、この行の任意のセルをクリックして行を強調表示したいだけです。誰かが私のミスがどこにあるのか教えてくれますか？あなたが望むものを達成するために

添付

plunker

Answer 1

一つの方法は、あなたのcolumnDefsにcellClassの定義を追加することです。この関数はグリッドとローの2つのパラメータをとります。あなたが行のUIDに変数を設定することができ、そして現在の行のuidが選択され、もしそうなら、あなたが設定できるのUIDと一致する場合にcellClass関数内で使用すると、確認することができますクリックで

$scope.gridOptions.columnDefs = [{ 
    name: 'id', 
    width: '150', 
    cellTemplate: "", 
    cellClass: getCellClass 
    }, { 
    name: 'name', 
    width: '200', 
    cellClass: getCellClass 
    } ... 
]; 

function getCellClass(grid, row) { 
    return row.uid === selectedRow ? 'highlight' : ''; 
} 

選択された行の背景色を適切に反映するクラスに変換します。

var selectedRow = null; 
gridApi.cellNav.on.navigate($scope, function(selected) { 
    if ('.ui-grid-cell-focus ') { 
     selectedRow = selected.row.uid; 
     gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); 
    } 
}); 

はここにあなたの更新plunkerへのリンクです：http://plnkr.co/edit/AgpAI2cmdqgNsSLVNjYA?p=preview

あなたはカスタムcellTemplatesを定義し、同様にあなたが行エンティティに設定されたプロパティに反応する可能性がcellClassアプローチが気に入らない場合。