根据数据库查询结果JSP展示甘特图（进度条）

接着上的刚写的《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");//获取对应房间名称