kendu Grid 数据聚合参数使用

我们想要显示得列表能够做一些聚合参数。
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#)”,分组得标题行显示,大致这些就可以用了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

因为有你更精彩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值