2016-10-19 37 views
0

我试图按两个字段对数据源进行分组,并获得其值的平均值或总和。 但即使我在数据源中同时指定了组和属性,我也无法得到它。KendoUI数据源组和由多个字段聚合

下面是代码:

var dataSource = new kendo.data.DataSource({ 
data: [ 
    { id: 1, name: "Amazon US", stock: 15, year: 2015}, 
    {id: 2,name: "Amazon US", stock: 20, year: 2016 }, 
    {id: 3,name: "Amazon US", stock: 7, year: 2016 }, 
    { id: 4, name: "Amazon EU", stock: 30, year: 2015 }, 
    { id: 5, name: "Amazon EU", stock: 7, year: 2015 }, 
    { id: 6, name: "Amazon EU", stock: 12, year: 2016 }, 
    { id: 7, name: "Amazon EU", stock: 26 , year: 2016} 
     ], 
schema: { // required if get method will be used 
    model: { 
     id: "id" 
    } 
} 
}) 

dataSource.read(); 

dataSource.bind("change", function() { 
    var log = $("#log"); 
    log.append("<P>total records in datasource is " + this.total() + "</p>" ); 
    var A = this.aggregates();   
    log.append("<p>total stock is " + A.stock.sum + "</p>"); 
}) 
.aggregate({ field: "stock", aggregate: "sum" }); 

在这里工作的例子: http://jsfiddle.net/rusev/NwG9A/2/

的总和预期的结果应该是:

  • AmazonUS | 2015 | 15
  • AmazonUS | 2016 | 27
  • AmazonEU | 2015 | 37
  • AmazonEU | 2016 | 38

有没有人有线索,如果这可能与KendoUI数据源?

+1

http://jsfiddle.net/3M2XR/364/我corectlly明白了吗? – calinaadi

回答

1

该方法如果calinaadi是正确的。还有一种方法可以通过递归以编程方式从DataSource中提取聚合信息。每个分组项目有一个value,aggregatesitems字段,您可以使用 - 在调试器中查看它们。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css"> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <div id="aggregates"></div> 
 

 
    <div id="grid"></div> 
 

 
    <script> 
 

 
     var dataSource = new kendo.data.DataSource({ 
 
     data: [ 
 
      { id: 1, name: "Amazon US", stock: 15, year: 2015}, 
 
      {id: 2,name: "Amazon US", stock: 20, year: 2016 }, 
 
      {id: 3,name: "Amazon US", stock: 7, year: 2016 }, 
 
      { id: 4, name: "Amazon EU", stock: 30, year: 2015 }, 
 
      { id: 5, name: "Amazon EU", stock: 7, year: 2015 }, 
 
      { id: 6, name: "Amazon EU", stock: 12, year: 2016 }, 
 
      { id: 7, name: "Amazon EU", stock: 26 , year: 2016} 
 
     ], 
 
     schema: { 
 
      model: { 
 
      id: "id" 
 
      } 
 
     }, 
 
     group: [ 
 
      { field: "name", aggregates: [{ field: "stock", aggregate: "sum" }] }, 
 
      { field: "year", aggregates: [{ field: "stock", aggregate: "sum" }] } 
 
     ], 
 
     aggregate: [ 
 
      { field: "stock", aggregate: "sum" } 
 
     ] 
 
     }); 
 

 
     $("#grid").kendoGrid({ 
 
     dataSource: dataSource, 
 
     dataBound: onDataBound, 
 
     groupable: true, 
 
     columns: [ 
 
      { field: "stock", groupFooterTemplate: "#= sum #", footerTemplate: "#= sum #" }, 
 
      { field: "name" }, 
 
      { field: "year" } 
 
     ] 
 
     }); 
 

 
     function onDataBound(e) { 
 
     var ds = e.sender.dataSource; 
 
     var dataItems = ds.view(); 
 
     var aggregatesResult = '<p>Sum of all stock: ' + ds.aggregates().stock.sum + '</p>' 
 
     aggregatesResult += '<ul>'; 
 
     for (var i = 0; i < dataItems.length; i++) { 
 
      aggregatesResult += getFieldAndSum(dataItems[i], ''); 
 
     } 
 
     aggregatesResult += '</ul>'; 
 

 
     $("#aggregates").html(aggregatesResult); 
 
     } 
 

 
     function getFieldAndSum(dataItem, parentValue) { 
 
     var result = '<li>' + (dataItem.value ? (parentValue + ' ' + dataItem.value + ' ' + dataItem.aggregates.stock.sum) : dataItem.stock); 
 
     if (dataItem.items && dataItem.items.length) { 
 
      for (var j = 0; j < dataItem.items.length; j++) { 
 
      result += '<ul>'; 
 
      result += getFieldAndSum(dataItem.items[j], parentValue + ' ' + dataItem.value); 
 
      result += '</ul>'; 
 
      } 
 
     } 
 
     result += '</li>'; 
 
     return result; 
 
     } 
 

 
    </script> 
 

 
    </body> 
 
</html>