简体   繁体   中英

ng-grid sum of values in aggregate row

I have an ng-grid with three columns (name, value, machine) that displays metrics (name, value) from three different computers (as indicated in machine column). Rather than displaying three lines for each metric, I have set groups: ['name'] in the gridOptions; however, I cannot figure out how to make the aggregate row display the sum of the values. Is there a way to access the values of the rows in each group to calculate a sum?

This is what I want to see (7, 10, 4, 6 on the aggregate rows in the value column):

  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

Thanks for your help!

I ran into this same problem and tried some proposed solutions I found but wasn't working with the version of the grid I have. I searched the grid source and found the template that mine was using for aggregate rows and copied it then tweaked to include a call to a function on my method for parts of the display:

On my gridOptions I define the property shown below

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>" +
    ""

On the scope of the controller for the grid I have the functions

  $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";
  };

You'll see in both cases I pass the row in the template to the function in the controller scope, then I look at the property called children on the row (I just figured this out using the Chrome debugging tools when other attempts didn't work out).

PS my grid has this compilation comment in the top, though no version :|

/***********************************************
* 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
***********************************************/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM