datagrid中添加合计行计算合计

    在公司demo项目实习中，我有一个功能是展示所有支出明细后，在下面添加一行合计，计算所有支出明细之和。

    首先我想到的是用easyui里datagrid有一个属性showFooter，就是添加尾行，无论在页面添加多少条数据，合计行都会位于所有记录的最下方，而且比较美观。于是我在我的代码中添加了showFooter：true的属性，如下：

<div id="payGrid" wj-type="datagrid"
	 wj-options="{title:"支出明细",listUrl:"<ww:actionUri action="dirPayDetailData"/>",idField:"uuid",columns:[[
	 	{ field: "ck", checkbox: true },
	 { title: "uuid", field: "uuid", width: 100,hidden:true},	
	{ title: "员工名称", field: "empName", width: 100},
	{ title: "支出金额", field: "payMoney", width: 150 },
	{ title: "支出时间", field: "payDate", width: 150,formatter:function(value,row,index){
	    return myFunction(row.payDate);
	}},
	{ title: "创建时间", field: "createTime", width: 300},
	{ title: "修改时间", field: "editTime", width: 300},
	{ title: "创建者", field: "creater", width: 300}
	]]<span style="color:#ff0000;">,showFooter:true,footer:[{"empName":"合计","payMoney":600.0}]</span>}">

这是模仿easyui官网的demo写的。官网demo的数据来源和我的不太相似，如果有兴趣，大家可以了解一下官网的。easyui官网footer-demo

    官网的demo中，引入了footer，如下：

<table class="easyui-datagrid" title="Footer Rows in DataGrid" style="width:700px;height:220px"
            data-options="
                url: "datagrid_data2.json",
                method: "get",
                fitColumns: true,
                singleSelect: true,
                rownumbers: true,
                showFooter: true
            ">
        <thead>
            <tr>
                <th data-options="field:"itemid",width:80">Item ID</th>
                <th data-options="field:"productid",width:120">Product ID</th>
                <th data-options="field:"listprice",width:80,align:"right"">List Price</th>
                <th data-options="field:"unitcost",width:80,align:"right"">Unit Cost</th>
                <th data-options="field:"attr1",width:250">Attribute</th>
                <th data-options="field:"status",width:60,align:"center"">Status</th>
            </tr>
        </thead>
    </table>

引入的json中，有三个属性：total，rows，footer。我理解的是，total是返回前台的记录数，rows是返回的数据，footer是你要添加的尾行。如下：

{"total":28,"rows":[
	{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
],"footer":[
	{"unitcost":19.80,"listprice":60.40,"productid":"Average:"},
	{"unitcost":198.00,"listprice":604.00,"productid":"Total:"}
]}。

    所以在设置后台返回前台的json格式的时候就要在json中添加footer属性，并设置自己的尾行栏。如下：

<pre name="code" class="java">

    public static String listArrayToJson(List<Object[]> list) {
		Map<String, Object> resultMap = new HashMap<String, Object>();
		resultMap.put("total", list==null?0:list.size());
		resultMap.put("rows", list==null?new ArrayList<Object>():list);
		return JSONObject.fromObject(resultMap).toString();
	}

    需要在以上代码中加入footer属性。

   然而后来发现，这样并不美观。同事说所谓尾行，是无论多少条记录，尾行都处于最下端。与我一开始想的效果并不相同。在经理的指点下，我换了个思路。

   我在后台往前台json前，在service中，数据查询后，就插入一行记录，即一个特殊的对象，只有合计和金额两项。

   如下：

<pre name="code" class="java">DataReader qc=new DataReader("select a.uuid from WjPayDetail a  "+getWhere(model)+orderBy);
			if(StringHelper.isEmpty(page.getCountField())){
				page.setCountField("uuid");
			}
			setWhere(model,qc);
			page=qc.page(page);
			List<WjPayDetail> details=DataReader.idToObj(WjPayDetail.class,page.getResults());
			<span style="color:#ff0000;">double paySum=0;
			for(WjPayDetail one:details){
				paySum=paySum+one.getPayMoney();
			}
			WjPayDetail detail=new WjPayDetail();
			detail.setPayMoney(paySum);
			detail.setEmpName("合计金额");
			details.add(detail);</span>
			page.setResults(details);
			res=ModeFactory.getModeFactory().buildNewServiceResult(
					IServiceResult.RESULT_OK,Messages.getString("systemMsg.success"),page);

红色的部分是我添加的，这样的话，添加的一行，不会存到数据库里，不会影响功能，也不会造成每查询一次，都在上次查询的基础上再添加一行的情况。

    前台页面上显示的是，合计行貌似作为一条正常记录展示，貌似可以像其他记录一样修改删除。这种情况，只需要你在后台或者前台做一下判断，再提示用户不可修改或者删除就好了。

    总之，我思考了两天的问题，终于在经理的指导下，算是解决了。