效果图：合计信息展示在页脚中(showFooter:true)

code:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>javascript test</title>

    <link rel="stylesheet" type="text/css" href="css/metro/easyui.css">

    <link rel="stylesheet" type="text/css" href="css/icon.css">

    <link rel="stylesheet" type="text/css" href="css/demo.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>

</head>

<body>

  <table id="totalSum"></table>

</body>

  <script type="text/javascript">

     $.extend($.fn.datagrid.methods, {

        statistics: function(jq) {

            var opt = $(jq).datagrid('options').columns;

            var rows = $(jq).datagrid("getRows");

            var footer = new Array();

            footer['sum'] = "";

            for (var i = 0; i < opt[0].length; i++) {

                if (opt[0][i].sum) {

                    footer['sum'] = footer['sum'] + sum(opt[0][i].field, 1) + ',';

                }

            }

            var footerObj = new Array();

            if (footer['sum'] != "") {

                var tmp = '{' + footer['sum'].substring(0, footer['sum'].length - 1) + "}";

                var obj = eval('(' + tmp + ')');

                if (obj[opt[0][0].field] == undefined) {

                    footer['sum'] += '"' + opt[0][0].field + '":"<b>合计:</b>"';//第0列显示为合计

                    obj = eval('({' + footer['sum'] + '})');

                } else {

                    obj[opt[0][0].field] = "<b>合计:</b>" + obj[opt[0][0].field];

                }

                footerObj.push(obj);

            }

            if (footerObj.length > 0) {

                $(jq).datagrid('reloadFooter', footerObj);

            }

            function sum(filed) {

                var sumNum = 0;

                var str = "";

                for (var i = 0; i < rows.length; i++) {

                    var num = rows[i][filed];

                    sumNum += Number(num);

                }

                return '"' + filed + '":"' + sumNum.toFixed(2) + '"';

            }

        }

    });

    $("#totalSum").datagrid({

        width: '50%',

        data:[

          {pro:'北京电信建站一期',amount: 2000,price: 100000},

          {pro:'上海电信建站二期',amount: 1000,price: 50000}

        ],

        showFooter: true,// 页脚要求显示

        fitColumns: true,

        rownumbers: true,

        columns: [[{

            field: 'pro',

            align: 'center',

            title: '项目',

            width: 100,

        },

        {

            field: 'amount',

            sum: true,

            align: 'right',

            title: '数量',

            width: 100,

        },

        {

            field: 'price',

            sum: true,

            align: 'right',

            title: '已付金额',

            width: 100,

        }

        ]],

        onLoadSuccess: function (data) {

            $('#totalSum').datagrid('statistics'); //合计

        },

    })

  </script>

</html>

datagrid 扩展 页脚 合计功能的更多相关文章

  1. easyui datagrid footer 页脚问题

    mvc 的一个例子 public string IndexV2() { var dataGridJson = new DataGridJson(); var data = new List<My ...

  2. Jquery EasyUI的datagrid页脚footer使用及数据统计

    最近做一个统计类的项目中遇到datagrid数据显示页脚footer合计的问题,对于构造统计结果数据格式,是在程序端构造一个{"rows":[],"total" ...

  3. Hexo Next配置百度分享、加入动态背景、接入网页在线联系功能、页脚增加统计功能、添加gitment、添加热度、阅读量排行

    Hexo Next配置百度分享.加入动态背景.接入网页在线联系功能.页脚增加统计功能.添加gitment.添加热度.阅读量排行: https://wangc1993.github.io/categor ...

  4. 在C#中实现Word页眉页脚的全部功能

    页眉页脚经常使用于文章排版,在Word工具栏里.我们能够加入页眉,页脚,页码,日期和时间.图片等信息和内容.页眉/页脚有两个额外选项:首页不同,奇偶页不同.有时在不同的节(section)里插入不同的 ...

  5. python 使用win32com实现对word文档批量替换页眉页脚

    最近由于工作需要,需要将70个word文件的页眉页脚全部进行修改,在想到这个无聊/重复/没有任何技术含量的工作时,我的内心是相当奔溃的.就在我接近奔溃的时候我突然想到完全可以用python脚本来实现这 ...

  6. Chrome扩展开发之四——核心功能的实现思路

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  7. Datagrid扩展方法InitEditGrid{支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

  8. Datagrid扩展方法onClickCell{easyui-datagrid-扩充-支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

  9. iOS开发——UI_swift篇&TableView实现页眉和页脚

    TableView实现页眉和页脚   在UItableView中header和footer是很常见的,而且他能让你实现很复杂的功能,我们见过最多的就是下拉刷新和上啦加载更多,当然你还可以在上面添加一个 ...

随机推荐

  1. Photoshop Keynote

    [Photoshop Keynote] 1.Tab:隐藏.显示所有面板. 2.Sihft+Tab:隐藏.显示右侧面板. 3.F:全屏切换. 4.选择并遮住: 参考:http://www.51shipi ...

  2. FP增加的索引

    1.优化FP_BOM中第839行执行过慢问题,且会出现ORA-01652: 无法通过 128 (在表空间 STGTEMP 中) 扩展 temp 段ORA-06512: 在 "STG.FP_B ...

  3. kafka NoNode错误

    报错 bin/kafka-run-class.sh kafka.tools.ConsumerOffsetChecker --zookeeper localhost:2181 --group=app-t ...

  4. Wasserstein距离

    https://blog.csdn.net/leviopku/article/details/81388306 https://blog.csdn.net/nockinonheavensdoor/ar ...

  5. 微信小程序开发——苹果手机领取卡券出现参数错误（安卓正常）

    异常描述: 微信小程序领取卡券,调用 wx.addCard 接口,安卓手机正常调起领取卡券界面,苹果手机.微信开发者工具中均出现“参数错误”,如图: 异常解析: 安卓手机能正常调起领取界面,那就说明领 ...

  6. [剑指Offer]判断一棵树为平衡二叉树（递归）

    题目链接 https://www.nowcoder.com/practice/8b3b95850edb4115918ecebdf1b4d222?tpId=0&tqId=0&rp=2&a ...

  7. [HDOJ]Coin Change(DP)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2069 题意 有面值1,5,10,25,50的硬币数枚,对于输入的面值n,输出可凑成面值n(且限制总硬笔 ...

  8. c#: 打开文件夹并选中文件

    一.常规方法 给定一个文件路径,打开文件夹并定位到文件,通常所用shell命令为:explorer.exe /select,filepath. c#以进程启动之为: if (File.Exists(f ...

  9. 开机进入boot menu和application menu，无法开机

        1.开机点击F1进入到bios界面 2.进入Security—Secure Boot—Disabled 如果不修改Secure boot选项为Disabled,在光驱引导时可能会出现报错 3. ...

  10. <history> 特别报道：Google离职富翁们都在干什么？

    特别报道:Google离职富翁们都在干什么? 时间:2008-01-23 10:16:47作者:CNET科技资讯网 本文关键词:Google CNET科技资讯网1月23日国际报道 假如你拥有1千万或1 ...