jqgrid基于onSelectRow和onSelectAll实现选中行汇总合计
jqGrid关于行合计一般基于表格底部汇总行为主，可以参考：jqGrid使用总结：数据加载、单元格编辑、底部导航、汇总合计行等常用操作。本文讨论表格行汇总另外一种应用场景：基于选中行汇总合计。我们可以利用jqGrid的两个事件：onSelectRow（选中、取消行）和onSelectAll（点击全选按钮），来实现基于选中行汇总。
1、DEMO截图
2、DEMO 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" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script>
<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js">script>
head>
<body>
<div class="page-content container">
<div class="page-body">
<div class="panel panel-default" id="panel-orders">
<div class="panel-heading">
<h3 class="panel-title">选中行汇总DEMO，需求数量合计：<span id="sum_count">0span>h3>
div>
<table id="orders">table>
div>
div>
div>
<script type="text/javascript">
var data = [], rowIds = [];
function getBills() {
var rowCount = 50;
for (var i = 0; i < rowCount; i ++) {
data.push({
sid: i,
goods_id: i,
goods_no: i + 1,
goods_name: '零件名称' + rowCount + i,
car_type_name: '车型' + rowCount + i,
package_name: '包装器具' + rowCount + i,
unit_name: '单位',
snp: 0.89,
box_count: rowCount + i,
total_count: rowCount + i,
goods_count: rowCount + i,
out_count: rowCount + i,
bill_no: 'BN0000000' + i,
barcode: '1000000000' + i,
flag: i >= rowCount - 1 ? 1 : 0,
})
}
$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
function calc_sum() {
var rowIds = $("#orders").jqGrid("getGridParam", "selarrrow");
var sum = 0;
for ( var i = 0, l = rowIds.length; i < l; i++) {
var row = $("#orders").jqGrid('getRowData', rowIds[i]);
sum += Number(row.goods_count);
}
$("#sum_count").text(sum);
}
$(function() {
$("#orders").jqGrid({
colModel: [
{label: "零件号", name: "goods_no", width: 60},
{label: "零件名称", name: "goods_name", width: 180},
{label: "车型", name: "car_type_name", width: 70},
{label: "包装器具", name: "package_name", width: 70},
{label: "单位", name: "unit_name", width: 40},
{label: "装箱率", name: "snp", width: 50, sorttype: "number"},
{label: "箱数", name: "box_count", width: 40, sorttype: "number"},
{label: "需求总数", name: "total_count", width: 70, sorttype: "number"},
{label: "需求数量", name: "goods_count", width: 70,},
{label: "出库数量", name: "out_count", width: 70, sorttype: "number"},
{label: "订单号", name: "bill_no", width: 120},
{label: "条码", name: "barcode", width: 120}
],
datatype: 'local',
rownumbers: true,
multiselect: true,
height: 300,
rowNum: 1000,
onSelectAll: function() { calc_sum(); },
onSelectRow: function() { calc_sum(); },
});
getBills();
});
script>
body>
html>
3、DEMO说明
注意：onSelectRow和onSelectAll事件要同时使用，汇总计算时请注意类型转换，避免字符串连接。