Kendo UI grid数据聚合实例

ゝ一纸荒年。 2022-06-05 09:12 131阅读 0赞

<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，131人围观）

还没有评论，来说两句吧...

相关阅读

相关 handlebars+kendo-ui grid单元格点击事件(一）

<form> <label style="display:inline-block;width:70px">项目年度</label> <

亦凉/ 2023年08月17日 16:47/ 0 赞/ 114 阅读

相关 kendo-ui grid单行取值问题

参考路径：[https://codeday.me/bug/20181101/320043.html][https_codeday.me_bug_20181101_320043.

妖狐艹你老母/ 2023年08月17日 15:59/ 0 赞/ 138 阅读

相关 kendo-ui 获取后台数据

1: dataSource: DataSourceFactory.createBaseFrontDefault('/api/staff/supplier

电玩女神/ 2023年06月12日 11:29/ 0 赞/ 24 阅读

相关 kendo-ui 下载试用

[https://www.kendouicn.com/post/product/kendo-ui][https_www.kendouicn.com_post_product_k

叁歲伎倆/ 2022年11月25日 10:11/ 0 赞/ 190 阅读

相关 kendo ui grid checkboxz勾选全部效果

关键代码片段：指定kendo ui grid的列 Columns = \[ \{template:'<input

冷不防/ 2022年09月24日 10:26/ 0 赞/ 196 阅读

相关 Kendo UI grid数据聚合实例

<div id="grid"></div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"

ゝ一纸荒年。/ 2022年06月05日 09:12/ 0 赞/ 131 阅读

相关 Kendo UI Grid 外部实现过滤

kendo UI相关资料太少，查了好久才做出这个功能过滤窗口外观 ![Image 1][]![Image 1][]![SouthEast][] ![South

心已赠人/ 2022年06月04日 00:13/ 0 赞/ 172 阅读

相关 Kendo ui 使用总结----Kendo UI Grid

代码中理解比较好。代码数据获取： var melDataSource = new kendo.data.DataSource({

比眉伴天荒/ 2022年05月20日 05:37/ 0 赞/ 232 阅读

相关 Kendo ui 使用总结----Kendo UI 模板

近来工作用到了一个未接触过的前端框架，在使用中有一些心得体会，记录下来，只是一部分心得，后期再补充。。 Kendo UI 模板模板语法 Kendo 模板使用了一种称为

梦里梦外;/ 2022年05月20日 05:30/ 0 赞/ 187 阅读

相关 kendo ui 单击取消编辑数据grid减少的原因和治疗方法的数据

kendo ui单击取消编辑数据buttongrid数据缩减。原因grid编辑数据追打datasorce于data寻找阵列数据的存在。假定有不会加入，加入缺席。首先一个样本

忘是亡心i/ 2022年04月10日 10:17/ 0 赞/ 256 阅读