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

实例代码提供了表格底部汇总、合计行功能，我们先看下用户指南关于实例代码合计行都有哪些说明？然后再看个演示，看看实例代码表格底部汇总、合计行到底如何实现。

1、用户指南关于实例代码合计行的说明

1)表格配置：footerrow，boolean，默认错误的

如果设置为没错，这将在网格记录下方和页导航上方放置一个页脚表。列数等于colModel中指定的列数表格是否显示底部合计行。

2)表格配置：userDataOnFooter，布尔值，默认错误的

当设置为真实的时，如果footerrow参数设置为没错，我们会直接将用户数据数组用户数据放在页脚中。规则如下：如果用户数据数组包含与colModel中定义的任何名称相匹配的名称，那么该值将被放在该列中。如果没有这样的值，则不放置任何东西。请注意，如果使用此选项，我们将对该列使用当前的格式化程序选项（如果可用)。请参见footerData方法。如果设为没错，则用户数据可以用来填充汇总行。

3)汇总行赋值：FooterData([字符串操作],[对象数据],[布尔格式])

此方法获取或设置网格页脚行上的数据。在页脚行中设置数据时，数据将根据coModel中的格式化程序（如果已定义)进行格式化。如果footerrow选项设置为没错，则可以使用该方法参数启动动作-可以是“得到”或设置.默认值是得到.“得到”返回一个名为：值类型的对象，其中该名称是colModel中的一个名称。这将从页脚返回数据。另外两个选项在这种情况下没有效果“设置”接受一个数据对象，并将值放在页脚中该值根据colModel中格式化程序的定义进行格式化-请参见下一个参数。对象应该在名称：值对中，其中名称是来自colModelobject数据的名称-要在名称：值对的页脚中设置的数据，其中名称应该对应于colModel的名称，以便在适当的单元格中设置。这指示方法在设置新值时使用格式化程序（如果在colModel中设置)。值为错误的将禁用格式化程序的使用

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

1)案例截图

2)html代码

！DOCTYPE html html head meta charset=' UTF-8 '/title jg grid底部汇总行/title link rel='样式表href=' https://cdn。bootcss。com/Twitter-bootstrap/3。3 .7/CSS/bootstrap。量滴CSS ' rel='外部nofollow'/link rel='样式表href=' https://cdn。bootcss。com/font-awesome/4。5 .0/CSS/font-牛逼。量滴CSS ' rel='外部nofollow'/link rel='样式表href=' 3359 cdn .-page-body-div class=' panel panel-default ' id=' panel-orders ' table id=' orders '/table/div/div脚本类型=' text/JavaScript ' var data=[]；函数getbill(){ var行数=10；for(var I=0；我行计数；i ) { data.push({ sid: i，goods_no: i 1，goods_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 || []}).触发器(“ReLoadGrid”)；} $(function(){ $(“# orders”)).jqGrid({ col model :[{ label : '零件号，名称： '货物编号，宽度： 60},{标签: '零件名称，name: 'goods_name '，search:false，width: 180}，{label: '车型，名称： '汽车类型名称'，宽度： 70},{标签: '包装器具，名称： 'package_name '，宽度： 70},{标签: '单位，名称： '单位名称'，宽度： 40},{标签: '订单号，名称： '账单号'，宽度： 120},{标签: '订单数量，name: 'goods_count '，width: 80}，]，datatype: 'local '，rownumbers: true，height: 300，rowNum: 1000，footerrow: true，grid complete : function(){ var rows=$(' # orders ').jqGrid('getRowData ')，total _ count=0；for(var i=0，l=rows.lengthilI){ total _ count=(第[I]行).goods _ count-0)；} $('#orders ').jqGrid('footerData '，' set '，{goods_name:' -合计-'，goods _ count : total _ count })；} });getbill()；});/script/body/html3)代码说明：

表格构建时，设置：footerrow :真实网格完成(jqGridGridComplete)事件处理，进行数据汇总并赋值给合计行gridComplete在所有数据加载到网格中并且所有其他进程完成后激发。此外，该事件独立于数据类型参数并在排序分页等之后触发。如果数据类型被定义为函数，则不激发。

4)获取汇总行数据

var row=$('#orders ').jqGrid("footerData "，" get ")；以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。