easyui之showFooter

1.easyui中,如果要实现下面的这种效果,就需要用到easyui的showFooter,需要设置:showFooter:true

2.然后后台需要返回footer的数据,数据格式为这种:{"footer":[{"xiadan":1000,"account":"合计","shouyi":510}],必须是"footer":[{}]这种形式,一个{}代表一行,如果多行就多个{},多个{}直接通过逗号隔开

3.后台代码例子:

@RequestMapping("/fundDetail")   
 @ResponseBody
    public String fundDetail(FundDetailQuery fundDetail,Pager pager){
        ......
        List<Map<String,Object>> l = new ArrayList<Map<String,Object>>() ;//用来保存需要返回的footer数据
        Map<String,Object> m = new HashMap<String,Object>() ;
        m.put("account", "合计") ;//键名必须和前台页面的列名一致,当键名和列名一致,就会显示在那个列下面
        m.put("xiadan", xiadan) ;
        m.put("shouyi", shouyi) ;
        l.add(m) ;
      /** 多个footer就在加相应的Map,一个Map就是一个footer 
      Map<String,Object> m1 = new HashMap<String,Object>() ;
      m1.put("account", "测试") ;
      m1.put("xiadan", xiadan) ;
      m1.put("shouyi", shouyi) ;
      l.add(m1) ; */
      Map<String, Object> map=new HashMap<String, Object>(); 
      map.put("total", fundDetailService.queryFundDetailCou(fundDetail)); 
      map.put("rows", funds ); 
     map.put("footer", l) ;//保存footer数据     String result = JSONObject.fromObject(map).toString() ;     return result ;
}

多个footer效果图:

 

前台代码列子:

<script type="text/javascript">
        $(function(){
            //初始化表格
            $('#userTable').datagrid({
                title:'平台资金', //标题
                method:'get',
                iconCls:'icon-list', //图标
                singleSelect:false, //多选
                height:370, //高度
                nowrap: true,// True 就会把数据显示在一行里。
                autoRowHeight: false, // 自动调整行高
                fitColumns: true, //自动调整各列,用了这个属性,下面各列的宽度值就只是一个比例。
                striped: true, //奇偶行颜色不同
                collapsible:true,//可折叠
                url:"<%=request.getContextPath()%>/XXX/XXX", //请求地址
                remoteSort : false, //服务器端排序
                idField:'id', //主键字段
                queryParams:{}, //查询条件
                pagination:true, //显示分页
                rownumbers:true, //显示行号
                showFooter:true,
                columns:[[
                    {field:'ck',checkbox:true,width:2}, //显示复选框
                    ......
                    {field:'xiadan',title:'金额(元)',width:30,sortable:false,align:'center'},//当footer中返回的名字和field里面的名字一样,就会显示在该列下
                    {field:'shouyi',title:'收益(元)',width:30,sortable:false,align:'center'}],
                onLoadSuccess:function(){
                    var h = "<tr>"+
                            "<td></td><td></td><td>总计</td>" ;
                    $("#userTable").append(h)
                    $('#userTable').datagrid('clearSelections');
                }
            });
            
        });
</script>

 

posted @ 2017-09-27 09:46  孟夏草木长  阅读(1157)  评论(0)    收藏  举报