Griglia UI angolare - Come personalizzare il comportamento delle righe aggregate

Question

Quando si raggruppa, ng-grid crea righe di gruppo che appaiono e si comportano in modo diverso rispetto alle righe normali. In particolare, le righe di gruppo non mostrano colonne regolari, ma mostrano una singola riga unita come definito da aggregateTemplate. Quello che sto tentando di fare è personalizzare le righe di gruppo per includere dati di colonne aggregate. Ad esempio:

Colonne:
NAME | VALORE

Dati:
nome1 | 5
nome1 | 5
nome2 | 1

griglia visualizzata quando raggruppate per nome:
- nome1 | 10 (questa è la prima riga di gruppo espansa)
- name1 | 5 (queste sono le righe di dati effettive)
- name1 | 5 (queste sono le righe di dati effettive)
- name2 | 1 (questa è la seconda riga di gruppo collassata)

Si noti che le righe di gruppo visualizzano entrambe le colonne e il loro VALORE è uguale alla somma dei loro figli.
Se si ha familiarità con le tabelle pivot excel di ms, è esattamente la funzionalità del tipo di raggruppamento che sto tentando di emulare.
Una domanda simile qui sullo stack overflow (How to set aggregation with grouping in ng-grid) mostra un esempio di come eseguire i calcoli di aggregazione figlio, ma sono bloccato su come ottenere ng-grid per visualizzare l'output come righe normali con colonne separate. Guardando il codice della griglia NG non sembra un compito facile. Qualcuno ha qualche esperienza con questo?
Grazie!

Answer 1

È un vecchio questiotn, ma ho avuto esattamente lo stesso problema, quindi io do la mia soluzione qui:

ho copiato il modello di cellulare in aggregateTemplate, poi adattato per visualizzare la freccia, e ha chiesto una funzione per calcolare valore aggregato (sto semplicemente copiando il valore della prima riga, per esempio, sommando, min o max su valori potrebbero essere parametrizzati in definizione della colonna)

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 }">&nbsp;</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, 
       ... 

penso che questa soluzione può essere utilizzata adattando la "$ scope.aggFc "funzione ispirata al link che hai dato (How to set aggregation with grouping in ng-grid)

Answer 2

per ottenere le somme, si può semplicemente cambiare l'aggFC a qualcosa di simile:

$scope.get_total= (col,row) -> 
    # used by the footer template to access column totals. 
    return $scope.totals[col.field] if _.isUndefined(row) 
    _.reduce(row.children, ((sum, child) -> sum + child.entity[col.field]), 0) 

(sceneggiatura caffè e Underscore assunto) Nota che uso la stessa funzione sia per il piè di pagina (totale per l'intera tabella) e aggrows. Nel caso del piè di pagina, non viene passata alcuna riga, quindi vengono restituiti i totali pre-calcolati. se una riga viene passata, si presume che sia un aggregato e i suoi figli vengono sommati per la colonna.