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 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
Javascript中replace()小结
2015/09/30 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python time模块用法实例详解
2014/09/11 Python
Python画图学习入门教程
2016/07/01 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
解决python 文本过滤和清理问题
2019/08/28 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
python 实现控制鼠标键盘
2020/11/27 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
大学新生军训自我鉴定
2014/03/18 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB