<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.
