在公司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);
红色的部分是我添加的,这样的话,添加的一行,不会存到数据库里,不会影响功能,也不会造成每查询一次,都在上次查询的基础上再添加一行的情况。
前台页面上显示的是,合计行貌似作为一条正常记录展示,貌似可以像其他记录一样修改删除。这种情况,只需要你在后台或者前台做一下判断,再提示用户不可修改或者删除就好了。
总之,我思考了两天的问题,终于在经理的指导下,算是解决了。