ng-grid 聚合行中的值总和答案

【问题标题】：ng-grid sum of values in aggregate rowng-grid 聚合行中的值总和
【发布时间】：2013-08-27 04:50:02
【问题描述】：

我有一个包含三列（名称、值、机器）的 ng-grid，它显示来自三台不同计算机的指标（名称、值）（如机器列中所示）。我没有为每个指标显示三行，而是在 gridOptions 中设置了groups: ['name']；但是，我无法弄清楚如何使聚合行显示值的总和。有没有办法访问每组中的行的值来计算总和？

这就是我想看到的（7、10、4、6 在值列的聚合行上）：

  NAME           VALUE     MACHINE
v metric1 (3)    7
  metric1        3         comp-a
  metric1        2         comp-b
  metric1        2         comp-c
> metric2 (3)    10
> metric3 (3)    4
v metric4 (3)    6
  metric4        5         comp-a
  metric4        0         comp-b
  metric5        1         comp-c

感谢您的帮助！

【问题讨论】：

我相信这在很大程度上取决于您使用的网格版本。我在网上找到了一些解决同样问题的方法，但是网格的功能和内部数据模型在我找到的著作和当前版本之间发生了变化，我将在下面发布我当前的解决方案，但您可能需要深入研究网格代码有点在您的版本中找到模板，然后从那里调整/检查。
我使用的是 ng-grid 2.0.5 版
老实说，我刚刚意识到我现在不确定我在使用哪一个，只是有时间戳可以关闭......无论如何我都会发布我所做的。跨度>
您是否设法像上面的示例那样在其值列中进行聚合？这是我想在我的项目中的 ng-grid 中实现的目标。

标签： javascript angularjs ng-grid

【解决方案1】：

我遇到了同样的问题并尝试了一些我找到的建议解决方案，但不适用于我拥有的网格版本。我搜索了网格源，找到了我的用于聚合行的模板并复制了它，然后对其进行了调整，以在我的方法中包含对函数的调用，用于显示部分内容：

在我的 gridOptions 中，我定义了如下所示的属性

aggregateTemplate: "<div ng-click=\"row.toggleExpand()\" ng-style=\"rowStyle(row)\" class=\"ngAggregate\">" +
    "    <span class=\"ngAggregateText\"><span class='ngAggregateTextLeading'>{{row.totalChildren()}} {{row.label CUSTOM_FILTERS}} {{entryMaybePlural(row)}}</span><span>Total Weight: {{aggFunc(row)}} lbs {{AggItemsLabel}}</span></span>" +
    "    <div class=\"{{row.aggClass()}}\"></div>" +
    "</div>" +
    ""

在网格控制器的范围内，我有功能

  $scope.aggFunc = function (row) {
    var total = 0;
    angular.forEach(row.children, function(cropEntry) {
      total+=cropEntry.entity.weight;
    });
    return total.toString();
  };
  $scope.entryMaybePlural = function (row) {
    if(row.children.length>1)
    {
      return "entries";
    }
    else
      return "entry";
  };

您会看到，在这两种情况下，我都将模板中的行传递给控制器范围内的函数，然后查看行上名为 children 的属性（我只是在其他尝试时使用 Chrome 调试工具发现了这一点没有成功）。

PS 我的网格在顶部有这个编译注释，虽然没有版本：|

/***********************************************
* ng-grid JavaScript Library
* Authors: https://github.com/angular-ui/ng-grid/blob/master/README.md 
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
* Compiled At: 06/03/2013 21:19
***********************************************/

【讨论】：