角度網格突出顯示整個行按單元格點擊

看起來像一個簡單的任務，但我已經花了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') 

      }); 
    };

我看到上單擊單元格被解僱，但我不能強迫以色行，我不想選擇該行，因爲我使用複選框爲此目的選擇，我只想通過單擊此行中的任何單元格來突出顯示該行。有人能告訴我我的錯誤在哪裏嗎？

附plunker

來源

2016-07-26 Anton

一種方式來完成你想要的是一個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); 
    } 
});

下面是更新後的plunker鏈接：http://plnkr.co/edit/AgpAI2cmdqgNsSLVNjYA?p=preview

如果你不喜歡cellClass的方法，你可以定義自定義cellTemplates，同樣反應給你行實體設置屬性。

來源

2016-07-26 22:01:49

我仍然無法理解它是如何工作的唯一一件事是'gridApi.core.notifyDataChange'。非常感謝你的幫助，我很感激。 – Anton

gridApi.core.notifyDataChange是讓ui-grid知道重新呈現視圖所必需的。如果你不包含該調用，它將不會重新渲染，然後它不會反映所需的CSS類。很高興它有幫助！ –

角度網格突出顯示整個行按單元格點擊

回答

相關問題