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

Question

分组时,ng-grid会创建与常规行不同的组行.特别是,组行不显示常规列,但显示由aggregateTemplate定义的单个合并行.我正在尝试做的是自定义组行以包括聚合列数据.例如:

列:
NAME | VALUE

数据:
name1 | 5
name1 | 5
name2 | 1

按NAME分组时显示的网格:
- name1 | 10(这是扩展的第一组行)
- name1 | 5(这些是实际的数据行)
- name1 | 5(这些是实际的数据行)
- name2 | 1(这是折叠的第二组行)

请注意,组行显示两列,其VALUE等于其子项的总和.
如果您熟悉ms excel数据透视表,那就是我正在尝试模拟的分组类型功能.

关于堆栈溢出的类似问题(如何使用ng-grid中的分组设置聚合)显示了如何进行子聚合计算的示例,但我仍然坚持如何让ng-grid像常规行一样显示输出有单独的列.看看ng-grid代码,它看起来不是一件容易的事.有人有这方面的经验吗？
谢谢!

Answer 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 setaggregation with grouping in ng-grid）