分组时,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 }"> </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)