如何在重新排序后为所有可见行调用 ui-grid cellClass 函数？答案

【问题标题】：How to get ui-grid cellClass function called for all visible rows after reorder?如何在重新排序后为所有可见行调用 ui-grid cellClass 函数？
【发布时间】：2016-09-27 21:34:56
【问题描述】：

我编写了一个 cellClass 函数 rowSpanCellClass 来实现 HTML 行跨度之类的东西。当一个值在使用 rowSpanCellClass 的列中重复时，具有重复值的单元格将出现垂直合并。

最初渲染网格时，这可以正常工作。但是，如果我反转不同列 (docNum) 的排序顺序，则不会为每一行调用 rowSpanCellClass。因此，rowSpanCellClass 列中的一个单元格的类不会在应该改变的时候改变。

这是simple plunker 演示我的问题。

如果您单击 Doc Num 标题两次以反转初始排序顺序，控制台的输出显示除了 rowRenderIndex = 3 的行之外的所有行都调用了 rowSpanCellClass。

我相信该行被跳过，因为在重新排序行时它不会改变。需要为所有行调用 rowSpanCellClass，因为单元格类不仅取决于当前行值，还取决于相邻行值。

我尝试使用以下代码强制在每一行上调用 cellClass 函数

$scope.gridOptions.onRegisterApi = function (gridApi) {
      gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
          gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
      });
  };

但是，sortChanged 事件会在行重新排序之前触发，因此这不起作用。

如何在所有可见行重新排序后调用 rowSpanCellClass？

【问题讨论】：

标签： angular-ui-grid

【解决方案1】：

我通过使用自定义单元格模板和 ng-class 而不是 cellClass 解决了这个问题。

cellTemplate: '<div ng-class="grid.appScope.rowSpanCellClass(grid, row, col)" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div>'}

变化在这个plunkr

【讨论】：