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>