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

2024-07-28 23:06:39

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）案例截图

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”);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Jqgrid之强大的表格插件应用

jqGrid是一款基于jQuery的功能强大的表格插件,使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信,jqGrid运行速度相当快,可以很好的应用在一些后台管理系统来管理大量数据的场合. jqGrid特性: 基于jquery UI主题,开发者可以根据客户要求更换不同的主题. 兼容目前所有流行的web浏览器. Ajax分页,可以控制每页显示的记录数. 支持XML,JSON,数组形式的数据源. 提供丰富的选项配置及方法事件接口. 支持表格排序,支持拖动列.隐藏列. 支持滚动加载数
通过点击jqgrid表格弹出需要的表格数据

首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的. 特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及删除资料等功能. 自定义的工具列预设的Navigator工具列,可以很容易的使用新增.删除.编辑.检视及搜寻等功能. 完整的分页功能按下任一栏位的标头,皆可以该栏位为排序项目.无论是升序或降序皆可. 预设的action formatter,可以快速而直觉地对每笔资料做运算. 支持多种数据格式.比如json.xm
Jqgrid表格随窗口大小改变而改变的简单实例

使用jquery插件,主要实现当窗口发生改变时jqgird表格也随着改变大小 html:<div id="liste"> <table id="list" class="scroll" cellpadding='0' cellspacing='0' ></table> <div id="pager" class="scroll" style="t
jqGrid表格应用之新增与删除数据附源码下载

jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用. 下面给大家展示了效果图,喜欢的朋友可以直接下载源码哦. 效果展示源码下载在上一篇文章中,我们提到过jqGrid自身有强大的单元格操作模块,但是这些模块操作起来不太适合用户的习惯,在本文中,我们使用fancybox,以及表单插件来完成jqGrid数据的添加以及删除操作. XHTML 首先需要在he
MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据

看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是MongoDB基本应用实现起来还是比较轻松的,甚至代码比基本的ADO.net访问关系数据源还要简洁.由于其本身的"非关系"的数据存储方式,使得对象关系映射这个环节对于MongoDB来讲显得毫无意义,因此我们也不会对MongoDB引入所谓的"ORM"框架. 下面我们将逐步
jqgrid 表格数据导出实例

首先,是一段javascript脚本: 复制代码代码如下: /** * * * @param table_id 表格的id * @param container_id 容器的id * @param form_id 提交表单的id * @param title 文件名 * @param rownumbers */ function getXlsFromTbl(table_id, container_id ,form_id, title, rownumbers) {
jqGrid jQuery 表格插件测试代码

官方Demo地址:http://www.trirand.com/blog/jqgrid/jqgrid.html 效果图: 页面代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
jqGrid表格底部汇总、合计行footerrow处理

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 p
一个关于jqGrid使用的小例子(行按钮)

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jqGrid的JSO
vue中el-table两个表尾合计行联动同步滚动条实例代码

目录问题描述效果图思路完整代码总结问题描述最近产品提出一个需求,说是做表格呈现统计数据,不过数据源是来自两个地方的,所以需要做两个表格去呈现数据,同时在表格最后统计数据. 效果图我们先看一下效果图思路获取对应的两个表格设置滚动条的dom,并通过Element.scrollLeft去设置滚动的距离官方文档:developer.mozilla.org/zh-CN/docs/… 滚动容器(审查元素即可得知): 完整代码自己演示的话,直接复制粘贴即可,代码中包含注释 <templ
jQuery实现html表格动态添加新行的方法

本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
jQuery代码实现表格中点击相应行变色功能

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&
jquery实现表格中点击相应行变色功能效果【实例代码】

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&
JavaScript遍历table表格中的某行某列并打印其值

JavaScript遍历table 1.说明遍历表格中的某行某列,并打印其值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

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

相关推荐

随机推荐