easyui datagrid 动态创建复杂表头并加载数据

效果图

 

1、JSP页面

<table id="dg"></table>

2、JS

第一步：通过ajax先获取到后台传来的列数据的数组

第二步：加载列及加载数据

$(function(){
$.ajax({
url : "sys.do?act=getColumns",
// data:json,
// contentType:"application/json",
success : function(data) {
writeObj(data)
}
});

});

function writeObj(data) {
$('#dg').datagrid({
url : 'sys.do?act=dataTest',
method : 'get',
title : '业务、产值、收款统计报表',
columns : data,
height:750,
fitColumns:true,
// queryParams : params(),
pagination : true,
pageSize : 5,
pageList : [ 5, 10, 15 ]

});
}

 

3、后台

  一、表头实体类

private String field;
private String title;
private int width;
private int rowspan;
private int colspan;
private String align;
private String halign;

二、控制器（测试数据）

@RequestMapping(params="act=getColumns")
public void getColumns(HttpServletRequest request,HttpServletResponse response){
response.setContentType("java/json;charset=utf-8");
PrintWriter pw = null;
try {
pw = response.getWriter();
List<List<Header>> list = new ArrayList<List<Header>>();
List<Header> ths = new ArrayList<Header>();
Header header1= new Header();
header1.setField("branchName");
header1.setTitle("分支机构");
header1.setRowspan(2);
header1.setAlign("center");
ths.add(header1);
String currentDate = TimeUtil.currentTime("yyyy-MM");　　
String[] current_date = currentDate.split("-");
for(int i=1;i<=Integer.parseInt(current_date[1]);i++){     //根据需求决定显示多少列，现在显示的是小于等于当前月份的数据
Header header= new Header();
header.setTitle(i+"月");
header.setColspan(3);
header.setAlign("center");
ths.add(header);
}
Header header3= new Header();
header3.setField("year");
header3.setTitle("本年");
header3.setRowspan(2);
header3.setAlign("right");
header3.setHalign("center");
ths.add(header3);
Header header4= new Header();
header4.setField("total");
header4.setTitle("累计");
header4.setRowspan(2);
header4.setAlign("right");
header4.setHalign("center");
ths.add(header4);
list.add(ths);
//
List<Header> ths2 = new ArrayList<Header>();
for(int i=1;i<=Integer.parseInt(current_date[1]);i++){
Header header_1= new Header();
header_1.setField("yewu"+i);
header_1.setTitle("业务");
header_1.setAlign("right");
header_1.setHalign("center");
ths2.add(header_1);
Header header_2= new Header();
header_2.setField("chanzhi"+i);
header_2.setTitle("产值");
header_2.setAlign("right");
header_2.setHalign("center");
ths2.add(header_2);
Header header_3= new Header();
header_3.setField("shoukuan"+i);
header_3.setTitle("收款");
header_3.setAlign("right");
header_3.setHalign("center");
ths2.add(header_3);
}
list.add(ths2);
pw.write(JSONArray.fromObject(list).toString());
pw.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}


@RequestMapping(params="act=dataTest")
public void dataTest(HttpServletRequest request,HttpServletResponse response){
response.setContentType("java/json;charset=utf-8");
PrintWriter pw = null;
try {
pw = response.getWriter();
String page = request.getParameter("page");
String row = request.getParameter("rows");
String currentDate = TimeUtil.currentTime("yyyy-MM");
String[] current_date = currentDate.split("-");
Map<String,Object> map = new HashMap<String, Object>();
map.put("branchName", "第一分公司");
for(int i=0;i<Integer.parseInt(current_date[1]);i++){

// if(i==2){
map.put("yewu"+(i+1), "100000000");
map.put("chanzhi"+(i+1), "100000000");
map.put("shoukuan"+(i+1),"100000000");
// }else{
// map.put("yewu"+(i+1), (i+1));
// map.put("chanzhi"+(i+1), (i+1));
// map.put("shoukuan"+(i+1), (i+1));
// }
}
map.put("year", "1000000");
map.put("total","575757557");
pw.write(JSONArray.fromObject(map).toString());
pw.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}