KendoUI数据源组并按多个字段聚合
[英]KendoUI datasource group and aggregate by multiple fields
问题描述
我正在尝试按两个字段对数据源进行分组，以获取其值的平均值或总和。 但是，即使我在数据源中同时指定了组属性和聚合属性，也无法获得它。
这是代码：
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 个解决方案
解决方案1
2 已采纳 2016-10-19 18:50:59
如果calinaadi是正确的方法。 还有一种方法可以通过递归从数据源中以编程方式提取聚合信息。 每个分组的项目都有一个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>
在KendoUI中访问数据源的过滤器对象的字段
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.