文档章节

easyui列统计

black_lxf_720
 black_lxf_720
发布于 2015/10/08 16:38
字数 354
阅读 521
收藏 1
 $.extend($.fn.datagrid.methods, {
 //仿照easyui的表格方法(例:appendRows的方法)
 statistics: function (jq) {
  //获取表格列
  var opt=$(jq).datagrid('options').columns;
  //取得表的行
  var rows = $(jq).datagrid("getRows");
  var footer = new Array();
  //定义统计的列有哪些
  footer['sum'] = "";
  //遍历表格的列,并判断是否存在统计的属性(sum),并把我们需要统计的列提取出来
  for(var i=0; i<opt[0].length; i++){
   if(opt[0][i].sum){
    footer['sum'] = footer['sum'] + sum(opt[0][i].field)+ ',';
   }
  }
  //定义数组用于接收各列的统计值
  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][1].field] == undefined){
    footer['sum'] += '"' + opt[0][1].field + '":""';
    obj = eval('({' + footer['sum'] + '})');
   }else{
    obj[opt[0][1].field] = "" + obj[opt[0][1].field];
   }
   footerObj.push(obj);
  }
  //将我们统计的值加载到页脚行(表格的最后一行)
  if(footerObj.length > 0){
   $(jq).datagrid('reloadFooter',footerObj); 
  }
  //将需要统计的列的值进行统计计算
  function sum(filed){
   var sumNum = 0;
   for(var i=0;i<rows.length;i++){
    sumNum += Number(rows[i][filed]);
   }
   //组装统计列的值,注:这里的sumNum可以根据你需要的数据,区别我们是否需要保留小数点sumNum.toFixed(2);
   return '"' + filed + '":"' + sumNum.toFixed(2) +'"';
  };
  //设置页脚的样式
  var panel = $(jq).datagrid('getPanel');
     var tr = panel.find('div.datagrid-footer tr'); 
     $(tr).children('td').css({"color":"red","font-size":"12px","font-weight":"bold"}) ;
 }
});



调用的方法:
1、给表格加上页脚的属性  showFooter:true,

2、$("#detailed_dg").datagrid({

      onLoadSuccess:function(){
         $("#detailed_dg").datagrid("statistics");
      },
   });

© 著作权归作者所有

black_lxf_720
粉丝 5
博文 36
码字总数 20281
作品 0
深圳
程序员
私信 提问
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
我觉得jwwui就是抄袭easyui,大家有什么要说的

我这个人吧,就是爱较真。不骗别人,也不喜欢被别人骗。本来呢,我觉得jwwui就算是照着easyui抄出来的,作者也是一个牛逼的人物,毕竟那么多代码,又是不好整理结构的javascript。 但是呢,毕...

纠结名字
2015/01/16
6.5K
42
ASP.net+MVC2+EasyUI搭建一个简单表格示例

一个非常基础的小例子,主要是利用VS2010提供的MVC框架,后台是ASP.NET,前台是EasyUI,然后利用EasyUI的datagrid来显示一个表格的数据。 1.首先创建MVC项目。VS2010自带MVC2(虽然已经比较老...

guoliang
2013/10/10
9K
0
关于EasyUI使用tree方法生成树形结构加载两次的问题

html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解...

Doublec
2015/04/21
4K
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
29分钟前
4
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
31分钟前
4
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
6
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
4
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部