angularjs – Angular UI Grid – 如何自定义聚合行行为
发布时间：2020-12-17 07:28:23 所属栏目：安全 来源：网络整理
导读：分组时,ng-grid会创建与常规行不同的组行.特别是,组行不显示常规列,但显示由aggregateTemplate定义的单个合并行.我正在尝试做的是自定义组行以包括聚合列数据.例如： 列： NAME |值 数据： name1 |五 name1 |五 name2 | 1 按NAME分组时显示的网格： – name1
|
分组时,ng-grid会创建与常规行不同的组行.特别是,组行不显示常规列,但显示由aggregateTemplate定义的单个合并行.我正在尝试做的是自定义组行以包括聚合列数据.例如：
列： 数据： 按NAME分组时显示的网格： 请注意,组行显示两列,其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) （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |