如何让UI-GRID计算所有页面所有行的列总计？

这个问题我之前也碰到过！UI-GRID默认的聚合函数（比如内置的sum）只会计算当前分页下可见行的数据，要实现所有页面/全量数据的列总计，得自定义计算逻辑，不能依赖默认的聚合行为。下面给你两种可行的实现方案：

方案1：预计算全量总和（适合静态数据） #

如果你的数据集是一次性加载完成的静态数据，直接提前计算好目标列的总和，然后在列配置里自定义聚合函数返回这个总和即可：

步骤： #

1. 计算全量数据的列总和
2. 在列定义中替换默认聚合逻辑

// 假设你的UI-GRID配置绑定在$scope.gridOptions上
angular.module('app', ['ui.grid', 'ui.grid.pagination'])
.controller('MainCtrl', function($scope) {
  // 模拟你的数据集
  $scope.gridOptions = {
    paginationPageSize: 10,
    columnDefs: [
      { field: 'id', displayName: 'ID' },
      { field: 'name', displayName: '名称' },
      { 
        field: 'amount', 
        displayName: '金额',
        // 自定义聚合函数，直接返回预计算的全量总和
        aggregationType: function() {
          return $scope.totalAmount;
        },
        // 自定义页脚模板显示聚合值
        footerCellTemplate: '<div class="ui-grid-cell-contents text-right">总计: {{col.getAggregationValue()}}</div>'
      }
    ]
  };

  // 加载数据（模拟异步或静态数据）
  $scope.loadData = function() {
    // 假设这是你的全量数据
    $scope.gridOptions.data = [
      { id: 1, name: '商品1', amount: 100 },
      { id: 2, name: '商品2', amount: 200 },
      // ... 更多数据
    ];

    // 计算全量数据的amount列总和
    $scope.totalAmount = $scope.gridOptions.data.reduce(function(total, row) {
      // 处理空值或非数字情况
      return total + (parseFloat(row.amount) || 0);
    }, 0);
  };

  // 初始化加载数据
  $scope.loadData();
});

方案2：动态计算（支持筛选/动态数据） #

如果你的数据是动态加载、或者需要支持筛选后的全量总和，就需要监听UI-GRID的数据变化，实时计算当前有效数据的总和：

$scope.gridOptions.onRegisterApi = function(gridApi) {
  $scope.gridApi = gridApi;

  // 监听数据渲染完成（包括分页、筛选、排序后）
  gridApi.core.on.rowsRendered($scope, function() {
    // 获取当前所有可见的行（经过筛选/排序后的全量数据，不是当前页）
    var visibleRows = gridApi.core.getVisibleRows(gridApi.grid);
    // 计算总和
    $scope.totalAmount = visibleRows.reduce(function(total, row) {
      return total + (parseFloat(row.entity.amount) || 0);
    }, 0);

    // 通知UI-GRID刷新页脚聚合值
    gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
  });
};

关键注意点： #

• 不要使用UI-GRID内置的uiGridConstants.aggregationTypes.sum，因为它只会计算当前页的行
• 如果需要支持筛选，一定要用gridApi.core.getVisibleRows()获取筛选后的全量数据，而不是直接用gridOptions.data
• 计算时要处理空值或非数字的情况，避免NaN

这样配置后，页脚就会显示所有页面（或筛选后所有）行的列总计了！

内容的提问来源于stack exchange，提问作者user8685657