datagrid实现footer的两种方式

效果图

image

方法一

从后台传数据的时候，json里面带有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:"}
]}

我的后台是java(spring boot)写的

可以参考一下

mapResult.put("rows", mapList);
List<Map<String,Object>> mapList1=new ArrayList<Map<String,Object>>();
Map<String,Object> tmap1=new HashMap<String,Object>();
tmap1.put("price", total);
tmap1.put("number", "总价");
mapList1.add(tmap1);
mapResult.put("footer", mapList1);
return mapResult;

方法二

在js中初始化

$('#purchase_list_grid').datagrid('reloadFooter',[{number: '总价', price: 0}]);

顺便提一下 ，修改这个footer的方法，因为业务场景肯定要前端及时刷新总价内容

var rows = $('#purchase_list_grid').datagrid('getFooterRows');
rows[0]['price'] = totalMoney;
$('#purchase_list_grid').datagrid('reloadFooter');

说明： 因为footer中只添加了一行数据，所以取rows[0],