easyui列统计

最新推荐文章于 2021-07-16 16:15:51 发布

转载最新推荐文章于 2021-07-16 16:15:51 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/673236963/blog/514358

文章标签：

#javascript #python #ViewUI

本文介绍了一种在EasyUI DataGrid中实现表格数据统计的方法，包括如何定义统计列及加载统计值到页脚行，同时提供了完整的JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

 $.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");
      },
   });

转载于:https://my.oschina.net/673236963/blog/514358