效果图:合计信息展示在页脚中(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. uuid生成工具类

    public class UUIDTool { public static String getUUID() { return UUID.randomUUID().toString().replace ...

  2. spring boot 微服务例子一

    package com.example.hello.demo; import org.springframework.boot.SpringApplication;import org.springf ...

  3. maven开发工具安装

    Maven安装并测试步骤: 1.下载并解压meaven.zip: 2.配置环境变量“M2_HOME”指向meaven安装目录: 3.添加“%M2_HOME%\bin;”到path环境变量中: 4.测试 ...

  4. openstack(Pike 版)集群部署(七)--- Cinder 部署

    一.介绍 参照官网部署:https://docs.openstack.org/cinder/pike/install/index-rdo.html 继续上一博客进行部署:http://www.cnbl ...

  5. 让Ubuntu可以压缩/解压缩RAR文件

    ubuntu刚安装的时候是不能解压rar文件的,只有在安装了解压工具之后,才可以解压. 安装:sudo apt-get install unrar卸载:sudo apt-get remove unra ...

  6. C++思考

    1.复杂类型的对象,被栈或者队列等机制进行操作时,需要重新写其拷贝构造函数等,而不能使用默认拷贝构造函数. 2.复杂数据类型的对象的打印,需要对运算符进行重载,或者调用其中定义的打印方法.

  7. Tensorflow函数——tf.variable_scope()

    Tensorflow函数——tf.variable_scope()详解 https://blog.csdn.net/yuan0061/article/details/80576703 2018年06月 ...

  8. python 最简单的爬虫

    import urllib.request file=urllib.request.urlopen("http://www.qq.com") data=file.read() da ...

  9. this.class.getClassLoader().getResourceAsStream与this.class.getResourceAsStream 文件地址获取

    本文部分转自:http://xixinfei.iteye.com/blog/1256291 this.getClass().getClassLoader().getResource("tem ...

  10. 24 【python入门指南】class

    一.类 1.1,构造函数,析构函数 #!/bin/python class dog(): def __init__(self, age, name): self.age = age self.name ...