KendoUI 数据源分组和多字段聚合答案

【问题标题】：KendoUI datasource group and aggregate by multiple fieldsKendoUI 数据源分组和多字段聚合
【发布时间】：2016-10-19 10:53:22
【问题描述】：

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

代码如下：

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/

求和的预期结果应该是：

亚马逊美国 | 2015 | 15
亚马逊美国 | 2016 | 27
亚马逊欧盟 | 2015 | 37
亚马逊欧盟 | 2016 | 38

是否有人知道 KendoUI 数据源是否可以做到这一点？

【问题讨论】：

jsfiddle.net/3M2XR/364 我明白了？

标签： javascript kendo-ui aggregate datasource grouping

【解决方案1】：

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

<!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>

【讨论】：