有角度的ui网格通过单击单元格高亮显示整行

angular ui-grid highlight entire row by cell click

本文关键字：单元格 单击 高亮 显示 ui 网格      更新时间：2023-09-26

这看起来是一项简单的任务，但我已经花了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

实现所需功能的一种方法是将cellClass定义添加到columnDefs中。该函数采用两个参数：grid和row。

 $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，并对行实体上设置的属性做出类似的反应。

相关文章：