使用EasyUI的datagrid实现报表统计，添加总计行,选中数据行的求和计算等

效果图如下：

jsp前台页面：

<table id="datagridTable" class="easyui-datagrid" fitColumns="false" border="true" showFooter="true">
						<thead>
							<tr>
								<th data-options="field:'ck',checkbox:true,width:5">全选</th>
								<th
									data-options="field:'TRADE_ID',width:180,sortable:false,halign:'center',align:'center'">订单编号</th>
								<th
									data-options="field:'MAILNO',width:150,sortable:false,halign:'center',align:'center'" >运单号</th>
								<th
									data-options="field:'TRADE_DEPT_ID',width:100,sortable:false,halign:'center',align:'center'">渠道编码</th>
								<th
									data-options="field:'DEPART_NAME',width:120,sortable:false,halign:'center',align:'center'">渠道名称</th>
								<th
									data-options="field:'D_CONTACT',width:100,sortable:false,halign:'center',align:'center'">联系人</th>
								<th
									data-options="field:'D_MOBILE',width:100,sortable:false,halign:'center',align:'center'">联系电话</th>
								<th
									data-options="field:'D_ADDRESS',width:100,sortable:false,halign:'center',align:'center'">配送地址</th>
								<th
									data-options="field:'COMMDITY_NAME',width:100,sortable:false,halign:'center',align:'center'">商品名称</th>
								<th
									data-options="field:'PAGE_NUM',sortable:false,halign:'center',align:'center'">件数</th>
								<th
									data-options="field:'COMMDITY_NUM',width:100,sortable:false,halign:'center',align:'center'">数量(张)</th>
								<th
									data-options="field:'WEIGHT',width:100,sortable:false,halign:'center',align:'center'">重量(KG)</th>
								<th
									data-options="field:'FIRST_WEIGHT_FEE',width:100,sortable:false,halign:'center',align:'center'">首重费用(元)</th>
								<th
									data-options="field:'FEIGHT_FEE',width:100,sortable:false,halign:'center',align:'center'">续重费用(元)</th>
								<th
									data-options="field:'PROT_ORGFEE',width:100,sortable:false,halign:'center',align:'center'">保价原值(元)</th>
								<th
									data-options="field:'PROT_FEE',width:100,sortable:false,halign:'center',align:'center'">保价费(元)</th>
								<th
									data-options="field:'FEIGHT_FEE_TOTAL',width:100,sortable:false,halign:'center',align:'center'">合计(元)</th>
								<th
									data-options="field:'DELIVER_TIME',width:150,sortable:false,halign:'center',align:'center'">配送日期</th>
							</tr>
						</thead>
					</table>

js实现：

//列表数据查询
function queryDetails(){
	var startTime = $.trim($("#startTime").val());
	var endTime = $.trim($("#endTime").val());
	
	if(startTime == "undefine" || startTime == null || startTime == ''){
		$.walk.alert("请输入交接开始时间！", "info");
		return;
	}
	if(endTime == "undefine" || endTime == null || endTime == ''){
		$.walk.alert("请输入交接结束时间！", "info");
		return;
	}
	
	$("#datagridTable").datagrid({
		url : baseUrl + "/logisticsStatus/qryLogistcsDeliverDay",
		queryParams : {
			startTime:startTime,
			endTime:endTime
		},
		pageNumber:1,
		pageSize:5,
		nowrap:false,
		pageList:[30,50,100,200,300],
		pagination: true,
		loadMsg: "数据加载中....",
		collapsible: true,
//		onClickCell:function (rowIndex, field, value){
//			setTimeout(function(){
//				reckon();
//			},1);
//		},
		onCheck:function (rowIndex, rowData){
			setTimeout(function(){//延时执行自己体会效果
				debugger;
				reckon();
			},0.001);
		},
		onUncheck:function (rowIndex, rowData){
			setTimeout(function(){
				reckon();
			},0.001);
		},
		onLoadSuccess: onLoad
	});
}

//计算总计
function onLoad(){
	//给全选复选框绑定click事件
	$(".datagrid-header-check").children('input').bind("click",function(){
		setTimeout(function(){
			reckon();
		},0.001);
	});
	
	//初始化添加总计行
	addTotalRow();
}
//初始化添加总计行
function addTotalRow(){
	//添加“合计”列-[添加统计行]
	$('#datagridTable').datagrid('appendRow',{
		TRADE_ID: '<span id="span_font_item">合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + '共&nbsp;' + sumTotal() + '&nbsp;单</span>',
		PAGE_NUM: '<span id="span_font_item">' + compute("PAGE_NUM") + '</span>',
		COMMDITY_NUM: '<span id="span_font_item">' + compute("COMMDITY_NUM") + '</span>',
		WEIGHT: '<span id="span_font_item">' + compute("WEIGHT").toFixed(3) + '</span>',
		FIRST_WEIGHT_FEE: '<span id="span_font_item">' + compute("FIRST_WEIGHT_FEE").toFixed(2) + '</span>',
		FEIGHT_FEE: '<span id="span_font_item">' + compute("FEIGHT_FEE").toFixed(2) + '</span>',
		PROT_ORGFEE: '<span id="span_font_item">' + compute("PROT_ORGFEE").toFixed(2) + '</span>',
		PROT_FEE: '<span id="span_font_item">' + compute("PROT_FEE").toFixed(2) + '</span>',
		FEIGHT_FEE_TOTAL: '<span id="span_font_item">' + compute("FEIGHT_FEE_TOTAL").toFixed(2) + '</span>'
     });
	
	//合并单元格
	var rowsTotal = $('#datagridTable').datagrid('getRows');//获取最新的所有行
	$('#datagridTable').datagrid('mergeCells',{
		index: rowsTotal.length - 1,
		field: 'TRADE_ID',
		colspan:8
	});
	
	//设置添加行的复选框不可见)
	$(".datagrid-cell-check").children('input')[rowsTotal.length - 1].style.visibility="hidden";
	
	//设置增加过总计标识
	isExt = true;
}

//总计计算
function reckon(){
	//删除统计行，如果存在统计行则删除后重新添加
	if(isExt){
		var rows = $('#datagridTable').datagrid('getRows');
		$('#datagridTable').datagrid('deleteRow', rows.length - 1);
	}
	
	addTotalRow();
}

//总选中条数
function sumTotal(){
	 var rows = $('#datagridTable').datagrid('getSelections');
     return rows.length;
}

//指定列求和
function compute(colName) {
	debugger;
     var rows = $('#datagridTable').datagrid('getSelections');
     var total = 0;
     for (var i = 0; i < rows.length; i++) {
         total += parseFloat(rows[i][colName]);
     }
     return total;
 }