kendo ui grid 合計

最新推荐文章于 2020-12-02 18:46:13 发布
最新推荐文章于 2020-12-02 18:46:13 发布
阅读量794 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsjpanxiaoyu/article/details/78122309
版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <base href="http://demos.telerik.com/kendo-ui/grid/editing">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />


    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/Products",
                            dataType: "jsonp"
                        },
                        update: {
                            url: crudServiceBaseUrl + "/Products/Update",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: crudServiceBaseUrl + "/Products/Destroy",
                            dataType: "jsonp"
                        },
                        create: {
                            url: crudServiceBaseUrl + "/Products/Create",
                            dataType: "jsonp"
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    batch: true,
                    pageSize: 5,
                    aggregate: [
                        { field: "UnitPrice", aggregate: "sum" },
                        { field: "UnitsInStock", aggregate: "sum" },
                    ],
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductID: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } },
                                UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                                Discontinued: { type: "boolean" },
                                UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                            }
                        }
                    }
                });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                navigatable: true,
                pageable: false,
                // height: 550,
                toolbar: ["create", "save", "cancel"],
                columns: [
                    { field: 'ProductName', title: 'ProductName', footerTemplate: 'Total', attributes: { style: 'text-align:center;' }, footerAttributes: { style: 'color: red;text-align:center;' } },
                    { field: 'UnitPrice', title: 'UnitPrice', footerTemplate: '#: data.UnitPrice ? data.UnitPrice.sum: 0 #', attributes: { style: 'text-align:center;' }, footerAttributes: { style: 'color: red;text-align:center;' }, headerAttributes: { style: 'text-align:center;' } },
                    { field: 'UnitsInStock', title: 'UnitsInStock', footerTemplate: '#: data.UnitsInStock ? data.UnitsInStock.sum: 0 #', attributes: { style: 'text-align:center;' }, footerAttributes: { style: 'color: red;text-align:center;' }, headerAttributes: { style: 'text-align:center;' } },
                    { title: 'Total', template: '#= data.UnitPrice + data.UnitsInStock #', footerTemplate: '#: (data.UnitPrice ? data.UnitPrice.sum: 0) + (data.UnitsInStock ? data.UnitsInStock.sum: 0) #', attributes: { style: 'color: red;text-align:center;' }, footerAttributes: { style: 'color: red;text-align:center;' }, headerAttributes: { style: 'color: red;text-align:center;' } },
                    { command: 'destroy', title: '&nbsp;', width: '150' },
                ],
                editable: true
            });
        });
    </script>
    </div>


    <!-- <div id="example">
                <div id="grid"
                data-role="grid"
                data-bind="source:dataSource"
                data-toolbar="['create', 'save', 'cancel']"
                data-editable="true"
                @*data-pageable="true"*@
                @*data-toolbar="['create']"*@
                @*data-editable="inline"*@
                data-columns="[
                                    { field : 'ProductName', title: 'ProductName', footerTemplate: 'Total', attributes: { style: 'text-align:center;' }, footerAttributes: { style: 'color: red;text-align:center;' } },
                                    { field : 'UnitPrice', title: 'UnitPrice', footerTemplate: '#: data.UnitPrice ? data.UnitPrice.sum: 0 #', attributes: { style: 'text-align:center;' }, footerAttributes: { style: 'color: red;text-align:center;' }, headerAttributes: { style: 'text-align:center;' } },
                                    { field : 'UnitsInStock', title: 'UnitsInStock', footerTemplate: '#: data.UnitsInStock ? data.UnitsInStock.sum: 0 #', attributes: { style: 'text-align:center;' }, footerAttributes: { style: 'color: red;text-align:center;' }, headerAttributes: { style: 'text-align:center;' } },
                                    { title: 'Total', template: '#= data.UnitPrice + data.UnitsInStock #', footerTemplate: '#: (data.UnitPrice ? data.UnitPrice.sum: 0) + (data.UnitsInStock ? data.UnitsInStock.sum: 0) #', attributes: { style: 'color: red;text-align:center;' }, footerAttributes: { style: 'color: red;text-align:center;' }, headerAttributes: { style: 'color: red;text-align:center;' } },
                                    { command: 'destroy', title: '&nbsp;', width: '150' },
                                    @*{ command: ['edit', 'destroy'], title: '&nbsp;' },*@
                               ]">
            </div> -->
</body>


</html>


努力成为好爸爸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Kendoui grid多级分组表格展现
03-19
应用kendoui grid实现的多级分组表格展现，里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进，增加了很多的个别需求实现，在原来的版本是做不到的。...
Kendo UI Grid 用法详细整理
yzh的博客
12-12 2万+
在使用Kendo UI进行前端开发过程中，我们用的最多的可能就是数据表格Grid。在此文中，我将我所用到和知道的grid数据校验、数据绑定、数据操作、动态列加载、合并行/列/头、点击事件、内置事件、单元格跳转、提示框、全选、行移动、状态栏添加合计、轮播效果和分组折叠等用法，做了一个十分详细的整理，同时在其中也有很多grid操作的实际案例补充，如果有耐心看完，将能在使用Kendo UI grid时，用的更加灵活，加油吧。 知识无极限，与你来相见，欢迎点赞支持！...
Kendo Grid Footer的合计（备忘）
chelen_jak的专栏
04-26 1835
效果图：问题：       我们可以利用Kendo dataSource.aggregate设定哪些字段需要合计，但合计时无法排除某些记录（如上面的"Free"记录)解决方案：       我们可以用一个掩眼法来处理，"Amount合计"绑定的不是Amount字段合计，而是另一个字段的合计，问题就可以解决了xxx.editor.html&lt;style&gt; ... /*Gri...
kendoGrid合并单元格
风水月的专栏
10-15 1594
kendoGrid默认API中并没有合并单元格的方法，故自己借鉴网友的代码并做了改造，下述代码及完成了kendoGrid中的行的合并（在 dataBound事件中完成） //合并单元格 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kendo UI...
Kendo Grid 合计处理
chelen_jak的专栏
04-27 2444
效果图：代码：（可以将代码复制到 https://dojo.telerik.com 进行调试）&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Untitled&lt;/title&gt; &lt;link rel="styleshe
KendoUI 官方示例之 Grid / Detail template
KendoUI中文
05-03 917
详细示例进入：http://kendoui.io/examples/grid/detailtemplate.html   KendoUI中文网： http://www.kendoui.io
Kendo UI框架grid的Excel导出功能改进js代码
08-26
Kendo UI框架提供了强大的Excel导出功能，通过Grid的saveAsExcel能方便地导出Grid中的数据，而且格式美观大方，使用起来也非常方便。但是在实际使用中不是很理想，主要有以下两个问题： 1. 导出的列数据是原始值 ...
Kendo UI Grid
02-08
Kendo UI ,在ASP.NET MVC 4中使用Kendo UI Grid
kendo ui 实现复杂表头
10-24
该代码类里面实现的主要操作： 1.ajax 访问后代接口，并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置，这个是本人亲自写的，并且经过验证是正确的
Kendo UI Grid示例下载
05-09
Kendo UI Grid为开发者提供了100多种丰富的网格功能，从基本的筛选、排序，到高级的编页、分层数据分组等等。毫不夸张的说，Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实，下面我为大家整理了它的...
KendoUI速查手册--中文
01-23
KendoUI速查手册--中文
Kendo UI grid数据聚合实例
风轻云断的博客
11-23 3526
$("#grid").kendoGrid({ columns: [ { field: "firstName", footerTemplate: "#= kendo.toString(count,'N0') #" }, { field: "lastName" , footerTemplate: "#=
HTMLCSS学习笔记（二十三）GRID布局
关注我！带你一路 "狂飙" 到底！
11-24 435
则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。有一定的相似性，都可以指定容器内部多个项目的位置。划分网格的线，称为"网格线"。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。6、设置单元格内容在单元格内 水平 | 垂直 的对齐方式。7、设置整个内容区域在容器里面的水平 | 垂直 对齐方式。容器里面的水平区域称为"行"，垂直区域称为"列"。行和列的交叉区域，称为"单元格"。
在kendogrid中控制数据格式以及实现求和
Sara_xie的专栏
04-29 6912
footertemplate:"#=kendo.toString(sum,'N2')#" 将合并值保留两位小数点 $("#mainGrid1").kendoGrid({                 dataSource: {                     type: "json",                     transport: {          
kendou grid 合并列和行
hyd19931002的博客
08-21 1675
$("#grid").kendoGrid({         columns: [           { field: "firstName" },           { field: "lastName" }, /* group by this column to see the footer template */           {               field:
阮一峰老师 CSS Grid 网格布局教程(转载)
热门推荐
鸭绒的博客
09-30 2万+
特别声明：这篇博客转载于阮一峰老师，转载是为了方便日后复习，实在写的太棒了。 <!-- div class="asset-body" --> <h2>一、概述</h2> 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的.
kendoui grid合并单元格_Grid布局学习。
weixin_39535287的博客
12-02 483
一.基本概念 1.1.采用网格布局的区域就是容器，容器内部采用网格定位的子元素就称为项目。（注意必须是容器的直接子元素才能是项目，Grid布局只对项目有作用）。<1.2.容器的水平区域称为行（row），垂直区域称为列（column）。行和列的交叉区域就成为了单元格。正常情况下n行会有n+1条水平线，m列就会有m+1条垂直线。二，容器属性。2.1容器可以是块级元素，也可以使行内元素，一般默认情...
kendoui.for.jquery
最新发布
08-07
Kendoui for jQuery 是一套基于jQuery的Web开发工具库。它提供了丰富的界面组件和强大的功能，帮助开发者快速构建交互丰富、用户友好的Web应用。 Kendoui for jQuery 包含多个组件，如表格、图表、日历、下拉框等。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值