统计easyui datagrid某列之和显示在对应列下面
项目需求要在表格下面加一行统计求和的,结果网上搜寻了一堆,要么说的不详细,高深大牛们的见解;要么实现不了,搜寻老半天修改出一个可以用的,做一下学习记录,新手菜鸟,欢迎指正和新解决方案。
最终效果图:

JS代码
editcount = 0;
var objTable=$("#personManage");
objTable.datagrid({ pagination: true,
pagePosition:'bottom',
onLoadSuccess: compute,//加载完毕后执行计算
fitColumns:false,
enableHeaderClickMenu:false,
singleSelect:false,
autoRowHeight:true,
nowrap:true,
url:'${ctx}/cpv3QuotationCtrl/costGather?RndId='+Math.random(),
loadFilter:pagerFilter,
queryParams:buildParams(),
toolbar:"#toolbar",
rownumbers:true,
showFooter: true,
columns: [[
{ field: 'EVAL', title: '费用类别', width:80,align:'center'},
{ field: 'CON', title: '合同报价', width:80,align:'center'},
{ field: 'PCOST', title: '成本预算', width:80,align:'center'},
{ field: 'BOR', title: '预借款', width:80,align:'center'}
]]
// fitColumns:true//自适应宽度、可以水平滚动
});
function compute() {//计算函数
var rows = $('#personManage').datagrid('getRows')//获取当前的数据行
var ptotal = 0//计算listprice的总和
,utotal=0//统计unitcost的总和
,btotal=0;//统计unitcost的总和
for (var i = 0; i < rows.length; i++) {
ptotal += rows[i]['CON'];
utotal += rows[i]['PCOST'];
btotal += rows[i]['BOR'];
}
//新增一行显示统计信息
$('#personManage').datagrid('appendRow', { EVAL: '<b>统计:</b>', CON: ptotal, PCOST: utotal ,BOR : btotal});
}
JSP页面
<table id="personManage">
</table>
统计easyui datagrid某列之和显示在对应列下面的更多相关文章
- easyui datagrid 没数据时显示滚动条的解决方法
今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...
- 解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中
背景: 昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...
- easyui datagrid 诡异的无法显示问题
举个应用场景的例子来说明: 在采购单的编辑页面,上方为采购单自身的属性信息,下方使用tabs控件,加入两个tab页,分别为采购明细列表(DataGrid)和审核记录列表(DataGrid),即一个主业 ...
- JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列
转自 http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...
- EasyUI DataGrid 修改每页显示数量的最大值&&导出Grid到Excel
首先,最近在搞那个DataGrid的导出,发现,网上的用JS导出到本地的方法虽然可用,但是只能导出DataGrid当前的数据,例如说,DataGrid默认是最大显示50行,但是如果有多页,那么就无法显 ...
- jquery easyui datagrid设置可编辑行的某个列不可编辑
function onClickRowd(index1, field1) { if (editIndexd != index1) { if (endEditing()) { $('#dg').data ...
- Easyui datagrid 显示隐藏列
html: <div style="float: left; width: 1450px; height:auto; "> & ...
- EasyUI datagrid组件绑定有转义字符的json数据出错
最近项目中一个页面的datagrid出现了莫名其妙的问题, 首先是分页数据的第二页和第三页不能展示,过了一天后第一页也出不来了, 默认首页不出来导致后续分页处理无法进行, 整个数据都不出来了,最后只能 ...
- easyui datagrid 列隐藏和显示
easyui datagrid 列隐藏和显示 用js怎么控制列的显示和隐藏? 最佳答案 $('#grid').datagrid('hideColumn','列field');把hideColu ...
随机推荐
- zombie process
僵尸进程:子进程退出后,父进程还没有回收子进程的资源,那么这个子进程就处于僵尸状态.Q1:“资源”是些什么?Q2:父进程如何回收子进程的资源? 内核为每个终止子进程保存了一定量的信息,所以当终止进程的 ...
- 5 月 35 日临近,Google 无法访问,可以使用 Google IP 来解决。
每年都会有几天那啥,你懂的. 直接使用 Google 的域名访问经常会打不开,而使用 Google 的 IP 就会很顺畅. 使用 Chrome 浏览器我们经常都会在地址栏直接搜索,所以我们只要添加一个 ...
- html 标签 链接
<a href="http://www.baidu.com">百度</a> <a href="#here">here< ...
- 转:C++ 关键字 inline详细介绍
1. 内联函数 在C++中我们通常定义以下函数来求两个整数的最大值: int max(int a, int b) { return a > b ? a : b; } 为这么一个小的操作定义一个 ...
- python字符串连接的N种方式总结
python中有很多字符串连接方式,今天在写代码,顺便总结一下: 最原始的字符串连接方式:str1 + str2python 新字符串连接语法:str1, str2奇怪的字符串方式:str1 str2 ...
- python第四周迭代器生成器序列化面向过程递归
第一节装饰器复习和知识储备------------ 第一节装饰器复习和知识储备------------ def wrapper(*args,**kwargs): index(*args,**kwa ...
- 用Java实现一些常见的问题
八皇后 public class EightQueen { private static final int ROW = 4; private static final int COL = 4; pr ...
- css3的线性渐变效果
1.代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- C#实现按键精灵的'找图' '找色' '找字'的功能
http://www.cnblogs.com/JimmyBright/p/4355862.html 背景:游戏辅助功能通常使用按键精灵编写脚本,按键精灵的最大卖点就是能够找到画面中字,图,色,这对于模 ...
- 集成 SOLR 到 TOMCAT 中(傻瓜教程)
按照如下配置,整个 Solr 是绿色版的,可以将 Tomcat 目录复制到任何一个地方运行 1.下载 solr 4.3 版本 2.下载 Tomcat 7 ( 6 也可以),另外可以根据系统下载 32 ...