jqGrid表格底部汇总、合计行footerrow处理


Posted in Javascript onAugust 21, 2019

jqGrid提供了表格底部汇总、合计行功能,我们先看下user-guide关于jqGrid合计行都有哪些说明?然后再看个DEMO,看看jqGrid表格底部汇总、合计行到底如何实现。

1、user-guide关于jqGrid合计行的说明

1)表格配置:footerrow, boolean, 默认false

If set to true this will place a footer table with one row below the gird records and above the pager. The number of columns equal those specified in colModel
表格是否显示底部合计行。

2)表格配置:userDataOnFooter,boolean,默认false

When set to true we directly place the user data array userData in the footer if the footerrow parameter is set to true. The rules are as follows: If the userData array contains a name which matches any name defined in colModel, then the value is placed in that column. If there are no such values nothing is placed. Note that if this option is used we use the current formatter options (if available) for that column. See footerData method.
如果设为true,则userData可以用来填充汇总行。

3)汇总行赋值:footerData([string action], [object data], [boolean format])

This method gets or sets data on the grid footer row. When set data in the footer row, the data is formatted according to the formatter (if defined) in coModel. The method can be used if footerrow option is set to true.
parameters
string action - can be ‘get' or ‘set'. The default is get. ‘get' returns an object of type name:value, where the name is a name from colModel. This will return data from the footer. The other two options have no effect in this case. ‘set' takes a data object and places the values in the footer The value is formatted according to the definition of the formatter in colModel - see next parameter. The object should be in name:value pair, where the name is the name from colModel
object data - data to be set in the footer in name:value pair, where the name should correspond to the name of colModel in order to be set in the appropriate cell.
boolean format - default is true. This instruct the method to use the formatter (if set in colModel) when new values are set. A value of false will disable the using of formatter

2、一个DEMO,如何利用gridComplete事件进行表格数据汇总并赋值给合计行

1)案例截图

jqGrid表格底部汇总、合计行footerrow处理

2)html代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <title>jggrid底部汇总行</title>
 
 <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" />
 <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="external nofollow" />
 <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" rel="external nofollow" />
 <link rel="stylesheet" href="https://js.cybozu.cn/jqgrid/v5.3.1/css/ui.jqgrid.css" rel="external nofollow" />
 <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/jquery.jqGrid.min.js"></script>
 <script src="https://js.cybozu.cn/jqgrid/v5.3.1/js/i18n/grid.locale-en.js"></script>
</head>
<body>
<div class="page-content container">
 <div class="page-body"> <!-- page-body -->
 <div class="panel panel-default" id="panel-orders">
  <table id="orders"></table>
 </div>
 </div>
</div>
<script type="text/javascript">
 var data = [];
 function getBills() {
 var rowCount = 10;
 for (var i = 0; i < rowCount; i ++) {
  data.push({
  sid: i,
  goods_no: i + 1,
  goods_name: '零件名称' + rowCount + i,
  car_type_name: '车型' + rowCount + i,
  package_name: '包装器具' + rowCount + i,
  unit_name: '件',
  snp: 0.89,
  bill_amount: rowCount + i,
  goods_count: rowCount + i,
  bill_no: 'BN0000000' + i,
  qrcode: '1000000000' + i,
  barcode: '1000000000' + i,
  })
 }
 $("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
 }
 $(function() {
 $("#orders").jqGrid({
  colModel: [
  {label: "零件号", name: "goods_no", width: 60},
  {label: "零件名称", name: "goods_name", search:false, width: 180},
  {label: "车型", name: "car_type_name", width: 70},
  {label: "包装器具", name: "package_name", width: 70},
  {label: "单位", name: "unit_name", width: 40},
  {label: "订单号", name: "bill_no", width: 120},
  {label: "订单数量", name: "goods_count", width: 80},
  ],
  datatype: 'local',
  rownumbers: true,
  height: 300,
  rowNum: 1000,
  footerrow: true,
  gridComplete: function() {
  var rows = $("#orders").jqGrid("getRowData"), total_count = 0;
     for(var i = 0, l = rows.length; i<l; i++) {
      total_count += (rows[i].goods_count - 0);
     }
     $("#orders").jqGrid("footerData", "set", {goods_name:"--合计--",goods_count:total_count});
     }
 });
 getBills();
 });
</script>
</body>
</html>

3)代码说明:

  • 表格构建时,设置:footerrow: true
  • gridComplete(jqGridGridComplete)事件处理,进行数据汇总并赋值给合计行

gridComplete fires after all the data is loaded into the grid and all other processes are complete. Also the event fires independent from the datatype parameter and after sorting paging and etc. Does not fire if datatype is a defined as function.

4)获取汇总行数据

var row = $("#orders").jqGrid(“footerData”, “get”);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
JavaScript字符串对象
Jan 14 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 #Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 #Javascript
深入理解Vue keep-alive及实践总结
Aug 21 #Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 #Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 #Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 #Javascript
Vue formData实现图片上传
Aug 20 #Javascript
You might like
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python安装及变量名介绍详解
2020/12/12 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
党校培训思想汇报
2014/01/03 职场文书
酒店经理职责
2014/01/30 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
学习型班组申报材料
2014/05/31 职场文书
技校毕业生自荐信
2014/06/03 职场文书
学党史心得体会
2014/09/05 职场文书
户外活动总结
2015/02/04 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS