Angular UI Grid - 如何自定义聚合行行为答案

【问题标题】：Angular UI Grid - How to customize aggregate rows behaviorAngular UI Grid - 如何自定义聚合行行为
【发布时间】：2013-05-26 19:57:56
【问题描述】：

在分组时，ng-grid 创建组行，其外观和行为与常规行不同。特别是，组行不显示常规列，而是显示由 aggregateTemplate 定义的单个合并行。我正在尝试做的是自定义组行以包含聚合列数据。例如：

列：
姓名 |价值

数据：
名称1 | 5
名称1 | 5
名称2 | 1

按名称分组时显示的网格：
- 名称1 | 10（这是展开的第一组行）
-- 名称1 | 5（这些是实际的数据行）
-- 名称1 | 5（这些是实际的数据行）
- 名称2 | 1（这是折叠的第二组行）

请注意，组行显示两列，并且它们的 VALUE 等于它们的子项的总和。
如果您熟悉 ms excel 数据透视表，那正是我试图模拟的分组类型功能。

此处有关堆栈溢出的类似问题 (How to set aggregation with grouping in ng-grid) 显示了如何进行子聚合计算的示例，但我一直坚持如何让 ng-grid 像带有单独列的常规行一样显示输出。查看 ng-grid 代码看起来并不容易。有人有这方面的经验吗？
谢谢！

【问题讨论】：

标签： angularjs aggregate ng-grid

【解决方案1】：

这是一个老问题，但我遇到了完全相同的问题，所以我在这里给出我的解决方案：

我已经复制了aggregateTemplate 中的单元格模板，然后对其进行了调整以显示箭头，并调用了一个函数来计算聚合值（例如，我只是复制第一行的值，对值求和、最小值或最大值可以在列定义中进行参数化）

    groupTemplate=
        '<div ng-style="{\'top\':row.offsetTop+\'px\'}" class="{{row.aggClass()}}"></div>'
        +'<div ng-click="row.toggleExpand()" ng-style="{ \'cursor\': row.cursor ,\'top\':row.offsetTop+\'px\'}" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ngCellGroup {{col.cellClass}}">'
                +'<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>'
                +'<div >{{aggFc(row,col) }}</div>'

        +'</div>';

    $scope.aggFc=function(rowAgg,col){
        var row=rowAgg.children[0];
        if(row.entity[col.field] && col.cellFilter){
            console.log("'"+row.entity[col.field]+"'  |" +col.cellFilter);
            return $scope.$eval("'"+row.entity[col.field]+"'  |" +col.cellFilter);
        }
        return row.entity[col.field]
    };

     $scope.yourGrid =
            {
                data: '...',
                enableCellSelection: false,
                enableRowSelection: true,
                aggregateTemplate:groupTemplate,
                ...

我认为这个解决方案可以通过改编受您提供的链接启发的“$scope.aggFc”函数来使用 (How to set aggregation with grouping in ng-grid)

【讨论】：

【解决方案2】：

要获得总和，您只需将 aggFC 更改为：

$scope.get_total= (col,row) ->
    # used by the footer template to access column totals.
    return $scope.totals[col.field] if _.isUndefined(row)
    _.reduce(row.children, ((sum, child) -> sum + child.entity[col.field]), 0)

（假定为咖啡脚本和下划线）请注意，我对页脚（整个表格的总数）和 aggrows 使用相同的函数。在页脚的情况下，没有传入任何行，因此会返回预先计算的总数。如果传递了一行，则假定它是一个聚合，并且它的子级为该列求和。

【讨论】：