easyUI动态表头

为什么80%的码农都做不了架构师？>>>   

如上图，实现月份、日期、累积日期动态生成，然后再产生数据。

jsp页面：result1就是后台生成的表头。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div id="toolbar1">
    <div>
       <lable>条件1  </lable>
       <select id="num1" class="easyui-combobox" name="num1" data-options="editable:false,required:'true'">
       </select>
       <lable>条件2  </lable>
       <select id="num2" class="easyui-combobox" name="num2" data-options="editable:false,required:'true'" style="width:150px;">
       </select>
	   <a href="javascript:void(0)" onclick="dyTableQuery()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
	</div>
</div>
<table id="table1"></table>

<script type="text/javascript">
$("#num1").combobox({
	width : 120,
	url : 'queryNum/getNum1.do',
	panelHeight : 'auto',
	valueField : 'value1',
	textField : 'value1',
	onSelect : function(result) {
		$("#num2").combobox({
            width : 150,
            url : 'queryNum/getNum2.do?value1='+result.value2,
            panelHeight : 'auto',
            valueField : 'value2',
            textField : 'value2'
        });
	}

});

function dyTableQuery() {
    
    var $num1 = $("#num1").combobox('getValue');
    var $num2 = $("#num2").combobox('getValue');
    
    $.ajax({
            url:'queryNum/getNumFormat.do',
            type:'POST',
            data:{
                "num1" : $num1,
                "num2" : $num2
            },
            success:function(result1){
                 $('#table1').datagrid({
                     url :'queryNum/getNumDatas.do',
                     method :'post',
                     title:'',
                     border : false,
                     fitColumns : true,
                     singleSelect : true,
                     toolbar :'#toolbar1',
                     columns : result1
                     });
          },
          dataType:'json'
     });
}

</script>

java代码：用action处理请求，在生成表头时，注意colspan、rowspan以int形式返回；

以两个请求分别处理表头和内容，field属性的名称同列要相同；

求出数据库中，数据的最早开始时间、最晚结束时间，计算出每天，再以天为单位同数据内容对应。

	// 累计日、日期、月份、long日期、分段
	private static List<ClassOne> rhList = new ArrayList<>();
	// 数据行数
	private static int cn;
	// 船号
	private static String num1_show;
	//生成表头以对应的数据结构
	@Override
	public List queryFormat(String num1, String num2) throws Exception {
		num1_show = num1;
		List<Map<String, Object>> dataList = queryDao.getDatasDao(num1, num2);
		List<ClassTwo> list = new ArrayList<>();
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
		SimpleDateFormat sdfCh = new SimpleDateFormat("yyyy年MM月dd日");
		for (Map<String, Object> map : dataList) {
			ClassTwo npr = new ClassTwo();
			npr.setBlock(StringUtils.nullToString(map.get("block")));
			npr.setSchDays(Integer.parseInt(StringUtils.nullToString(map.get("jobday"))));
			npr.setSchStartDate(sdf.parse(StringUtils.nullToString(map.get("startdate"))));
			npr.setSchFinishDate(sdf.parse(StringUtils.nullToString(map.get("enddate"))));
			list.add(npr);
		}

		List<Long> startList = new ArrayList<>();
		List<Long> endList = new ArrayList<>();
		for (ClassTwo npr : list) {
			startList.add(npr.getSchStartDate().getTime());
			endList.add(npr.getSchFinishDate().getTime());
		}
		Collections.sort(startList);
		Collections.sort(endList);
		Date startDay = new Date(startList.get(0));
		Date endDay = new Date(endList.get(endList.size() - 1));

		// 开始--结束日期遍历
		Map<Integer, Date> dayMap = new TreeMap<>();
		Date everyDay = startDay;
		int i = 1;
		dayMap.put(i, everyDay);
		while (everyDay.getTime() <= endDay.getTime()) {
			everyDay = DateUtils.addDays(everyDay, 1);
			dayMap.put(++i, everyDay);
		}

		for (Integer key : dayMap.keySet()) {
			ClassOne rhVo = new ClassOne();
			Date date = dayMap.get(key);
			String dateStr = sdfCh.format(date);
			long dateTime = date.getTime();
			String[] split = dateStr.split("月");
			rhVo.setOneDay(key);
			rhVo.setEveryDay(split[1]);
			rhVo.setMouthOfYear(split[0] + "月");
			rhVo.setDateTime(dateTime);
			rhList.add(rhVo);
		}
		// 月份、包含日期数
		Map<String, Integer> dateMap = new TreeMap<>();
		for (ClassOne rh : rhList) {
			if (dateMap.containsKey(rh.getMouthOfYear())) {
				Integer count = dateMap.get(rh.getMouthOfYear());
				count++;
				dateMap.put(rh.getMouthOfYear(), count);
			} else {
				dateMap.put(rh.getMouthOfYear(), 1);
			}
		}
		List<List> headerList = new ArrayList<>();
		// 月份表头
		List<MouthHeaderVO> mhList = new ArrayList<>();
		MouthHeaderVO mhVo1 = new MouthHeaderVO();
		mhVo1.setTitle("月份");
		mhVo1.setColspan(1);
		mhVo1.setRowspan(1);
		mhList.add(mhVo1);
		for (String dm : dateMap.keySet()) {
			MouthHeaderVO mhVo = new MouthHeaderVO();
			mhVo.setTitle(dm);
			mhVo.setColspan(dateMap.get(dm));
			mhVo.setRowspan(1);
			mhList.add(mhVo);
		}
		headerList.add(mhList);
		// 日期表头
		List<DayHeaderVO> dhList = new ArrayList<>();
		DayHeaderVO dhVo1 = new DayHeaderVO();
		dhVo1.setField("block");
		dhVo1.setTitle("日期");
		dhVo1.setRowspan(1);
		dhList.add(dhVo1);
		// 累计日表头
		List<AddupDayHeaderVO> adhList = new ArrayList<>();
		AddupDayHeaderVO adhVo1 = new AddupDayHeaderVO();
		adhVo1.setField("block");
		adhVo1.setTitle("累计日期");
		adhVo1.setRowspan(1);
		adhList.add(adhVo1);
		for (ClassOne rhVo : rhList) {
			DayHeaderVO dhVo = new DayHeaderVO();
			dhVo.setField(String.valueOf(rhVo.getDateTime()));
			dhVo.setTitle(rhVo.getEveryDay());
			dhVo.setRowspan(1);
			dhList.add(dhVo);
			AddupDayHeaderVO adhVo = new AddupDayHeaderVO();
			adhVo.setField(String.valueOf(rhVo.getDateTime()));
			adhVo.setTitle(String.valueOf(rhVo.getOneDay()));
			adhVo.setRowspan(1);
			adhList.add(adhVo);
		}
		headerList.add(dhList);
		headerList.add(adhList);

		// 添加对应数据
		for (int j = 0; j < rhList.size(); j++) {
			ClassOne onedayRh = rhList.get(j);
			List<String> blockList = new ArrayList<>();
			int cnum = 0;
			for (int k = 0; k < list.size(); k++) {
				if (onedayRh.getDateTime() >= list.get(k).getSchStartDate().getTime() && onedayRh.getDateTime() <= list.get(k).getSchFinishDate().getTime()) {
					String block = list.get(k).getBlock();
					blockList.add(block);
					cnum++;
				}
			}
			onedayRh.setTodayBlock(blockList);
			if (cnum > cn) {
				cn = cnum;
			}
		}

		return headerList;
	}

        //返回数据内容
	@Override
	public List queryDatas() throws Exception {
		List<Map<String, String>> list = new ArrayList<>();
		for (int i = 0; i < cn; i++) {
			Map<String, String> map = new TreeMap<>();
			map.put("block", num1_show);
			for (int j = 0; j < rhList.size(); j++) {
				List<String> todayBlock = rhList.get(j).getTodayBlock();
				if (null != todayBlock && i < todayBlock.size()) {
					map.put(StringUtils.nullToString(rhList.get(j).getDateTime()), StringUtils.nullToString(todayBlock.get(i)));
				} else {
					map.put(StringUtils.nullToString(rhList.get(j).getDateTime()), "");
				}
			}
			list.add(map);
		}
		cn = 0;
		num1_show = null;
		rhList.clear();
		return list;
	}

 

转载于:https://my.oschina.net/gAKey/blog/1588829