Laufspaltensumme mit KendoGrid und AngularJS

Question

I''ll gerade mit Beispiel beginnen:

Wie Sie die links Spalte enthält die laufende Summe von rechten Spalte sehen kann.

Zum Beispiel:

1. 9.435 + 956 = 10.391
2. 9.435 + 956 + 147 = 10.538
3. 9.435 + 956 + 147 + 694 = 11.232
4. usw.

Ich bin vertraut mit den Grundlagen von Kendo-Grid, aber diese Aufgabe ist jetzt über mir. Ich weiß nicht, wo ich anfangen soll. Danke im Voraus.

Answer 1

Ich weiß nicht, ob Sie diesen Wert speichern möchten, aber wenn es nur für visuelle Zwecke ist, sollte eine Vorlage für eine Spalte ausreichen.

$scope.mainGridOptions = { 
    ... 
    columns: [ 
     { 
      title: "Running Sum", 
      template: function (dataItem) { 
       //This function is applied for each dataitem in your datasource 
       var dataSource=dataItem.parent();//Get the full dataSource 
       var index=dataSource.indexOf(dataItem);//Get the index of the dataItem in the dataSource 
       if(index>0){ 
        //Iterate to get the total 
        for(var i=0,total=0;i<=index;i++){ 
         total+=dataSource[i].Price; 
        } 
        return total; 
       } 
       else return dataItem.Price; 
      } 
     }, 
     ... 
    ], 
    ... 
}; 

Ich konnte nicht testen, aber es sollte in etwa so sein, und so viel wie:

In der Definition der Spalten des Rasters, sollten Sie Ihre „Running Sum“ -Spalte wie folgt definieren Sie haben nicht zehntausende Datenelemente in Ihrer Datenquelle, Ihre Leistung sollte nicht mit dieser einfachen Funktion kompromittiert werden.

Allerdings würde ich für eine neue Eigenschaft zu dem Modell des Grid hinzuzufügen, lesen Sie einfach die Eigenschaft „RunningSum“ (oder was auch immer Sie es nennen) des vorherigen Element:

$scope.mainGridOptions = { 
    dataSource:{ 
     schema:{ 
      model:{ 
       ... 
       fields:{ 
        ... 
        Price:{type:"number",editable:true,defaultValue:0} 
        runningSum:{type:"number",editable:false,defaultValue:0} 
        //new property,dont worry for editable false, it will still allowed 
        //to be modified programatically and will be avoided 
        //in case of "editable":"popup" 
       } 
      } 
     } 
    }, 
    ... 
    columns: [ 
     { 
      title: "Running Sum", 
      template: function (dataItem) { 
       //This function is applied for each dataitem in your datasource 
       var dataSource=dataItem.parent();//Get the full dataSource 
       var index=dataSource.indexOf(dataItem);//Get the index of the dataItem in the dataSource 
       if(index>0){ 
        dataItem.runningSum=dataItem.Price + dataSource[index-1].runningSum; 
       } 
       else{ 
        dataItem.runningPrice=dataItem.price; 
       } 
       return dataItem.runningPrice 
      } 
     }, 
     ... 
    ], 
    ... 
}; 

ich viele angenommen Dinge für diesen Ansatz, wie Ihre Grid-Direktive hat eine k-options = "mainGridOptions" in der Sie die gesamte Konfiguration, aber als Entwurf, ich hoffe, es kann für Sie nützlich sein.