接着上的刚写的《JavaScript实现JSP日历》 ,日历已经有了,剩下的就是点击日期后打开会议申请的时间分布图,时间的分布使用类似甘特图的形式展示 :如图(测试数据)
提示信息是鼠标放上去显示的。
方法如下:
一、分析
实现的方法可以用固定个数的TD对应每天的24小时,然后根据会议时间在对应TD上添加背景。由于是会议申请,通常的时间都是整点或是半点。所以,将每天的24小时对应48个TD,每个TD表示半小时。然后从数据库中将会议时间段取出,计算会议占用的是0-48之间的那些TD,给对应的TD加上背景就OK,至于提示,则只要在加背景的时候加上<a>,将提示信息放进title属性就OK了。下面就开始干喽。
二、实现
通过查询,得出对应日期当天的所有会议开始和结束时间,获得一个List(appliesList),假设包含房间号(ROOM_NAME),开始时间(START_DATE),结束时间(END_DATE),申请状态(STATUS)。
Calendar cal = Calendar.getInstance();//用来计算日期
List appliesList = null;//结果集
List GTList = new ArrayList();//用于页面展示的List
String hour_start = "",hour_end = "";//开始时间,结束时间
int halfh_start = 0,halfh_end = 0;//开始时间和结束时间对应的半小时
int min = 0;//分钟数,用来计算30分钟前后的半小时数
String confer_room = "";//房间名称
String [] on_date = new String[48];//记录被占用的半小时
String [] event = new String[48];//记录对应时间(<a>)
String [] classValue = new String [48];//记录被占用TD的CLASS,即背景图
appliesList = baseDao.queryForList(sql.toString());//获得当天申请记录
//开始循环生成甘特图,并将统一会议室的记录合并成一条
for(int idx = 0 ; idx < appliesList.size(); idx ++){
Map applyMap = (Map)appliesList.get(idx);//获取单条记录
String room_name = (String)applyMap.get("ROOM_NAME");//获取对应房间名称