KendoUI 数据源分组并按多个字段聚合 [英] KendoUI datasource group and aggregate by multiple fields
问题描述
我正在尝试按两个字段对数据源进行分组，并获取它们值的平均值或总和.但是即使我在数据源中同时指定了 group 和aggregate 属性，我也无法得到.
I'm trying to group a datasource by two fields and get the average or sum of their values. But even if I specify both group and aggregate properties in the datasource, I can't get it.
代码如下:
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/
总和的预期结果应该是:
The expected result for the sum should be:
- 亚马逊美国 |2015 |15
- 亚马逊美国 |2016 |27
- 亚马逊欧盟 |2015 |37
- 亚马逊欧盟 |2016 |38
有人知道 KendoUI 数据源是否可以做到这一点吗?
Does anyone have a clue if this is possible with the KendoUI datasource?
推荐答案
如果 calinaadi 是正确的方法.还有一种方法可以通过递归以编程方式从 DataSource 中提取聚合信息.每个分组的项目都有一个您可以使用的 value、aggregates 和 items 字段 - 在调试器中查看它们.
The approach if calinaadi is correct. There is also a way to extract the aggregate information from the DataSource programmatically via recursion. Each grouped item has a value, aggregates and items fields that you can use - see them in the debugger.
<!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 数据源分组并按多个字段聚合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
