角度网格突出显示整个行按单元格点击

看起来像一个简单的任务，但我已经花了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类。很高兴它有帮助！ –

角度网格突出显示整个行按单元格点击

回答

相关问题