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

            });
    };

我看到如何触发单元格点击，但我无法强制为该行着色并且我不想 select 该行，因为我为此使用了复选框 selection目的，我只想通过单击该行中的任何单元格来突出显示该行。有人能告诉我我的错误在哪里吗？

附上plunker

Answer 1

完成所需任务的一种方法是将 cellClass 定义添加到 columnDef。该函数有两个参数：网格和行。

 $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 匹配，如果匹配，则可以设置 class 到正确反映所选行的背景颜色的 class。

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

这里有一个 link 给你更新的 plunker：http://plnkr.co/edit/AgpAI2cmdqgNsSLVNjYA?p=preview

如果您不喜欢 cellClass 方法，您可以定义自定义 cellTemplates 并类似地对您在行实体上设置的属性做出反应。

angular ui-网格通过单元格点击突出显示整行

angular ui-grid highlight entire row by cell click

javascript

angularjs

angular-ui-grid