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

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

列：
NAME |值

数据：
name1 |五
name1 |五
name2 | 1

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

请注意,组行显示两列,其VALUE等于其子项的总和.

如果您熟悉ms excel数据透视表,那就是我正在尝试模拟的分组类型功能.

关于堆栈溢出(How to set aggregation with grouping in ng-grid)的类似问题显示了如何进行子聚合计算的示例,但我仍然坚持如何让ng-grid显示输出,就像具有单独列的常规行一样.看看ng-grid代码,它看起来不是一件容易的事.有人有这方面的经验吗？

谢谢！

这是一个古老的问题,但我有完全相同的问题,所以我在这里给出我的解决方案：

我已经在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)