easyUI的汇总列,在前端生成

1、easyUI初始化,启用汇总列,showFooter:true

2、后台json有默认的footer的值

{"total":28,"rows":[
    {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
    {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
    {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
    {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
],"footer":[{"unitcost":合计,"listprice":0}]}

3、前台获取footer的值,然后修改,再刷新

 onLoadSuccess: function (data) {//表单加载完后再加载此方法
                sumline(data);
            }
//汇总列
        function sumline(data) {
            // var rows = $(‘#dg‘).datagrid(‘getRows‘)//获取当前的数据行
            var ptotal = 0//
            for (var i = 0; i < data.rows.length; i++) {
                ptotal += parseInt(data.rows[i].listprice);
            }
            //新增一行显示统计信息
            //$(‘#list‘).datagrid(‘appendRow‘, { strLearningDutyName: ‘<b>合计:</b>‘, trainingNum: ptotal, strTrainingTimes: utotal });
            var rows = $(‘#list‘).datagrid(‘getFooterRows‘);
            rows[0]["listprice"] = ptotal;
            $(‘#list‘).datagrid(‘reloadFooter‘);
        }
时间: 2024-10-25 07:18:11

easyUI的汇总列,在前端生成的相关文章

前端生成图表

1.常用的前端生成图表的工具HighCharts和echarts 2.具体内容可参考官方文档,有一些具体实例,JS和HTML的代码都存在,还可以编辑代码 3.具体的设置还可以参考官方文档 4.使用样例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src=&qu

EasyUI datagrid 动态绑定列

查了很多资料,有点乱 首先声明一下这里必须要用easyui1.3.1 不多说直接上代码: 首先打开jquery.easyui.min.js,查找_53b() 找到下面的代码 function _53b(){ var _53c=opts.loader.call(_538,_53a,function(data){ setTimeout(function(){ $(_538).datagrid("loaded"); },0); _4b1(_538,data); setTimeout(func

html5 canvas 前端生成缩略图

html5 canvas 前端生成缩略图 更新: 2013/08/01: 解决了后面遇到的bug: 图片被压扁(IOS6); 图片被旋转; 整个源码放在: https://github.com/kairyou/html5-make-thumb 新方案需要后面实现的, 就是下面的旧版本里的功能(水印/是否强制拉伸以适应目标尺寸等功能). w3ctech长沙站交流会, 里面分享的PPT: http://www.slideshare.net/99leon/html5-create-thumbnail

WebGIS中等值线前端生成绘制简析

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 等值线是GIS制图中常见的功能,一般有两种思路:一种是先进行插值生成等值面栅格图,然后将等值面提取成等值线:另一种是进行插值后,直接再根据算法进行插值点连接生成一条尽量闭合以及平滑的曲线. 在进行插值中,有很多算法可以选择,各种算法中也会有不同的参数需要调试,并且更具实际情况,比如地理环境因素等进行微调,最后建模.这里我们要讨论的是忽略一切外在因素,只根据坐标

easyui datagrid的列编辑

[第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去 看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第二张表有一个列是需要用户手动填写添加的. 国际惯例,上代码 <div id="cc" class="easyui-layout" style="width: 100%; height: 380px;"> <div data-option

二维码生成策略之前端生成

前段时间项目中需要动态的生成二维码,经过评估,前后端生成都可以.但后端生成会有两个问题: 没有找到正规发布出来的后端开源库. 二维码图片,会随着商品的增加而不断变多. 基于以上两个问题,决定在前端生成二位码.当时使用的是 jquery.qrcode.min.js,可以在github上找到这个类库. https://github.com/jeromeetienne/jquery-qrcode 下面来介绍下这个类怎么来使用,先看下面这个例子.其中第10行调用方法qrcode来生成二维码. 1 <!D

雷林鹏分享:jQuery EasyUI 数据网格 - 列运算

jQuery EasyUI 数据网格 - 列运算 在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列.一个运算列通常包含一些从一个或多个其他列运算的值. 首先,创建一个可编辑的数据网格(datagrid).这里我们创建了一些可编辑列,'listprice'.'amount' 和 'unitcost' 列定义为 numberbox 编辑类型.运算列是 'unitcost' 字段,将是 listprice 乘以 amount 列的结果. title="Editable

IT忍者神龟之Jquery插件easyUI属性汇总回顾

找了个时间看了下EasyUI插件,对它的插件感觉是很舒服,特地把Easy UI的大部分功能属性做了一下汇总. 此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里. 属性分为CSS片段和JS片段. CSS类定义: 1.div easyui-window        生成一个window窗口样式. 属性如下: 1)modal:是否生成模态窗口.true[是] false[否] 2)shadow:是否显示窗口阴影.true[显示] false[不显示] 2.div e

jQuery Easyui datagrid动态列绑定

前几天有人在使用jQuery EasyUI的datagrid时,遇到不会动态绑定列的情况,而网上给出的例子可能也是比较早的处理办法,竟然需要修改easyui源码,其实解决这问题的思路是很简单,我们只需修改要显示的列即可.那位朋友最后改为这种处理时,发现还是有问题,最终我发现她返回不是合法json,里边多个方括号,这里推荐大家使用本站的JSON在线校验格式化工具来验证返回json是否正确. 这里我们以上篇文章中类似的简单json来说明这个问题,比如后台要根据当前用户的权限返回不同的json: 分享