Kendo UI grid数据聚合实例

<div id="grid"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" rel="stylesheet" />
<script>
$("#grid").kendoGrid({
columns: [
{ field: "firstName",
footerTemplate: "<span style='float:right'>#= kendo.toString(count,'N0') #</span>"
},
{ field: "lastName" ,
footerTemplate: "<span style='float:right'>#= count #</span>",
},
{ field: "age",
footerTemplate: "<span style='float:right'>#= kendo.toString(sum,'N0') #</span>",
}
],
dataSource: {
data: [
{ firstName: "Jane", lastName: "Doe", age: 30 },
{ firstName: "John", lastName: "Doe", age: 33 }
],
aggregate: [
{field: "firstName",aggregate: "count"},
{ field: "lastName", aggregate: "count" },
{ field: "age", aggregate: "sum"}]

}
});
</script>