我们想要显示得列表能够做一些聚合参数。
1.首先贴码
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
group: {
field: "UnitsInStock", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum"},
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "count" }
]
},
aggregate: [ { field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "min" },
{ field: "UnitsInStock", aggregate: "max" }]
},
sortable: true,
scrollable: false,
pageable: true,
columns: [
{ field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
{ field: "UnitPrice", title: "Unit Price", aggregates: ["sum"], groupHeaderColumnTemplate: "Sum: #=sum#" },
{ field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#",
groupFooterTemplate: "Average: #=average#" },
{ field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "<div>Min: #= min #</div><div>Max: #= max #</div>",
groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }
]
});
});
</script>
</div>
[kendu得案例](https://demos.telerik.com/kendo-ui/grid/aggregates) 2.第二步解释 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200410140149796.png) 因为要做聚合运算,那么数据得架构就必须要有,这个fields是把列名定义成number,这是必须要得 然后我们开始定义聚合函数如下图
这是定义得聚合函数,求和求平均,求最大值基本和Excel一样
第三步对于列进行操作
解释上图,field和我们定义得架构函数,title列名,aggregates是做什么运算,footerTemplate: "Total Count: #=count#"是最下面得一行显示得总数,groupFooterTemplate: "Count: #=count#"这是显示在分组得下一行,
groupHeaderTemplate: “Units In Stock: #= value # (Count: #= count#)”,分组得标题行显示,大致这些就可以用了