EasyUI DataGrid 根据查询条件，动态生成表格（表格列数不固定）

具体需求是这样的，根据用户选择的开始日期至结束日期，统计这段时间内的数据，并以上周六-本周五 为一组列，展示到数据表格。

（1）开始日期 - 结束日期 可变的，所以数据表格的列数也是不固定，正常的方式（ 固定columns的方式 ）就无法满足这个需求。

（2）所以就需要在用户选择 开始日期&结束日期后，在后台生成对应的columns和data 并重新加载Datagrid的方式来实现。

前端页面截图如下所示：

当用户输入开始时间 和 结束时间 并点击查询后，通过Ajax传递相关参数到后台，后台查询数据，并返回拼接好的columns 和data，再重新加载datagrid。点击查询执行的函数search如下所示：

function search(){
	var start = $("#start").datebox('getValue'); 
	var end = $("#end").datebox('getValue'); 
	if(start === "" || end === ""){
		alert("请选择开始时间和结束时间！");
		return;
	}
	if(!checkDate(start,end)){
		alert("结束时间不能小于开始时间！");
		return;
	}
	
	var dif = DateDifference(start,end);
	if(dif > 60){
		alert("查询区间不要超过2个月！");
		return;
	}
	var weekObj = getWeekObject(start,end);
	$.ajax({
		url: "searchMailWeek.action",
		data: {"weekObj":JSON.stringify(weekObj),projectId:projectId},
		success: function(data){
			BatchPlanData = data;
			var data = JSON.parse(data);
            //返回的拼接好的col
			var col = eval("(" + data.Head.Head + ")");
            //data
			var tableData = data.data;
			$('#testReport').datagrid({
				columns:col,
				data:tableData,
				remoteSort:false,
				multiSort:true,
				onClickRow: function (rowIndex, rowData) {
		             $(this).datagrid('unselectRow', rowIndex);
				}
			});
		}
	});
}

当Ajax请求发送到后台，执行的doGet方法代码如下：

（1）主要思路为使用字符串，拼接你自己需要的columns代码，这个我就不过多解释了。每个人的表格样式不一致，需要你自己取思考如何拼接。

（2）可以试着先在前端页面把需要的样式写出来，然后再看看columns 是什么样的，再去后台生成字符串，拼接。

@SuppressWarnings("unchecked")
	@Override
	protected void doGet(final HttpServletRequest req, final HttpServletResponse resp) throws ServletException, IOException {
		Gson gson = new Gson();
		String weekObj = req.getParameter("weekObj").replace("-", "");
		List<Map<String,String>> data = gson.fromJson(weekObj, List.class);
		Map<String, Object> returnDate = new HashMap<>();
		
		List<Map<String, String>> returnData = new ArrayList<>();
		//datagrid 第一行表头代码
		String firstLine = "[\r\n" + 
				"			[{field:'no',title:'序号',rowspan:2,width:'6%',align:'left',sortable : true},\r\n" + 
				"				{field:'projectName',title:'项目名称',rowspan:2,width:'20%',align:'left',sortable : true},\r\n" + 
				"				{field:'projectNum',title:'项目编号',rowspan:2,width:'10%',align:'left',sortable : true},\r\n" + 
				"				{field:'projectManager',title:'行方项目经理',rowspan:2,width:'15%',align:'left',sortable : true},";
		//datagrid 第二行表头代码
		String secondLine = "[";
		
		for(Map<String,String> map : data) {
			String start = map.get("saturday");
			String end = map.get("friday");
			//装配表头字符串
			firstLine += "{field:'"+start+"',title:'（"+fixDate(start)+"-"+fixDate(end)+"） 周报',colspan:2,align:'center',sortable : true},";
			secondLine +="{field:'"+start+"1',title:'是否提交周报',width:'15%',align:'center',sortable : true},{field:'"+start+"2',title:'是否按时发送',width:'15%',align:'center',sortable : true},";
		}
		
		//获取所有的项目管理 
		List<IWorkItem> projects = trackerService.queryWorkItems("type:project", "id");
		int count = 1;
		for(int i=0;i<projects.size();i++) {
			IWorkItem project = projects.get(i);
			List<IWorkItem> weeklys = linkedItemsService.getLinked(project,"belong_to", "weekly");
			if(weeklys.size() == 0) {
				continue;
			}
			String ids = "";
			for(int j=0; j<weeklys.size() ;j++) {
				IWorkItem weekly = weeklys.get(j);
				ids += weekly.getId()+" ";
			}
			Map<String,String> dataMap = new HashMap<>();
			//序号
			dataMap.put("no", count++ +"");
			//项目名称
			dataMap.put("projectName", project.getTitle());
			//项目编号
			dataMap.put("projectNum", WorkItemUtil.getFiledKey(project,"projectNum"));
			//行方项目经理
			dataMap.put("projectManager", WorkItemUtil.getFiledName(project, "projectManager"));
			
			for(Map<String,String> map : data) {
				String start = map.get("saturday");
				String end = map.get("friday");
				//查找map中的  上周六到本周五  区间的周报 
				List<IWorkItem> weeklyItems = trackerService.queryWorkItems("type:weekly AND startDate:["+start+" TO "+end+"] AND stopDate:["+start+" TO "+end+"] AND id:("+ids+")", "id");
				//装配表头字符串
				
				for(IWorkItem item : weeklyItems) {
					String status = "未提交";
					if(item.getStatus().getId().equals("submit")) status = "已提交";
					//是否提交周报
					String isSubmit = status;
					//是否按时提交（发送）周报
					String inTime = "未按时发送";
					//邮件发送时间
					Date updated = WorkItemUtil.getDateField2Date(item, "sendTime");
					if(updated != null) {
						SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd");
						Date dateTime = null;
						try {
							 dateTime = simpleDateFormat.parse(end);
							 dateTime.setHours(23);
							 dateTime.setMinutes(59);
							 dateTime.setSeconds(59);
							 if("已提交".equals(status)) {
								 if(dateTime.getTime() > updated.getTime()) {
									 inTime = "按时发送";
								 }
							 }
							 dataMap.put(start+"1", isSubmit);
							 dataMap.put(start+"2", inTime);
						} catch (ParseException e) {
							 e.printStackTrace();
						}
					}
				}
			}
			returnData.add(dataMap);
		}
		
		firstLine += "],";
		secondLine += "]]";
		//表头数据
		Map<String,String> DataHead = new HashMap<>();
		DataHead.put("Head", firstLine + secondLine);
		
		returnDate.put("Head",DataHead);
		returnDate.put("data",returnData);
		
		responseOut(resp,gson.toJson(returnDate));
	}

输入开始日期 & 结束日期 点击查询后的具体效果：