Question

我了解了在对网格here进行分组时如何自定义ng-grid的聚合。
现在 - 如果我的表如下所示，当我在 groupName 上进行分组时，如果我想在aggregateTemplate中显示每列（value1，value2，value3）的摘要？

col1;value1;value2;value3;groupName
"first";10;20;30;"group 1"
"second";10;20;30;"group 1"
"third";10;20;30;"group 2"
"fourth";10;20;30;"group 3"
"fifth";10;20;30;"group 3"

当然，我可以在aggregateTemplate calculateChildren函数中一个接一个地执行此操作，但重要的是列和它的摘要是对齐的。基本上我正在寻找的是模板生成相同数量的“单元格”，并在该单元格中为每列添加摘要。

以下是一个样本plunker：http://plnkr.co/edit/f8patmHudM5PSRyEy6gW?p=preview

Answer 1

我设法通过编写自己的aggregationTemplate找到了解决方案。该模板现在如下所示：

aggregateTemplate: 
"<div onmouseover='mouseOver()'; style='display: inline-block;' ng-click=\"row.toggleExpand()\" ng-style=\"rowStyle(row)\" class=\"ngAggregate\">" +
"    <span style='margin-left: -22px' class=\"ngAggregateText\">" +
"      <div ng-class=col.colIndex() style='display: inline-block' ng-repeat='col in renderedColumns'><span>{{col.index > 1 ? (aggFunc(row,col) | SwedishCurrency) : (col.index == 0 ? '&nbsp;' : row.label)}}</span></div>" +
"     </span>" +
"    <div class=\"{{row.aggClass()}}\"></div>" +
"</div>" +
""

这是聚合函数

$scope.aggFunc = function(row, col) {
  var total = 0;
  angular.forEach(row.children, function(cropEntry) {
    total += parseFloat(cropEntry.entity[col.field]);
  });

  return total;    
};

我使用以下ng-repeat（从上面的模板定义中提取）对齐细胞：

ng-repeat='col in renderedColumns'

分组时每列的Angular ng-grid摘要

1 个答案: