角度ui網格通過單元格單擊突出顯示整行

Question

這看起來很簡單，但是我已經花了4個小時來找到解決方案。 如何通過單元格單擊突出顯示整個行？

在注冊API上我有下一個

 $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')

            });
    };

我看到如何觸發單擊單元格的方式，但是我不能強制為行着色，也不想選擇該行，因為我為此使用了復選框選擇，所以我只想通過單擊任何單元格來突出顯示該行在這一行。 有人可以告訴我我的錯誤在哪里嗎？

附帶的插棒

Answer 1

一種實現所需目標的方法是將cellClass定義添加到columnDefs。 該函數有兩個參數：網格和行。

 $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' : '';
 }

單擊時，您可以將變量設置為該行的uid，在cellClass函數內部，您可以檢查當前行的uid是否與所選uid匹配，如果可以，則可以將該類設置為可以正確反映該類的類。所選行的背景色。

 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);
   }
});

這是您更新的插件的鏈接： http ://plnkr.co/edit/AgpAI2cmdqgNsSLVNjYA?p=preview

如果您不喜歡cellClass方法，則可以定義自定義cellTemplates並類似地對在行實體上設置的屬性做出反應。