jQuery绘制甘特图

《jQuery绘制甘特图》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、jQuery绘制甘特图一、任务需求任务需求：需要在maximo中以甘特图方式显示工程进度，如图：二、分析在Maximo应用程序设计器中无法实现所需要求，甘特图实现需要在maximo中嵌套jsp。分析用web技术实现甘特图1、整理绘制甘特图所需的数据。“工程进度、名称、进度、受控、备注”这些数据可以直接从数据库查询；我们需要处理的是表头的年份和甘特图的开始位置、长度。a)需要得到表头的年份，这个可以根据工程进度记录的开始时间和结束时间获取到b)甘特图的开始位置及长度，开始位置可以根据该条记录开始时间和开始年份

2、时间相减得到，长度则是该条记录的开始时间和结束时间。2、根据数据绘制甘特图步履jQuery有强大的选择器和操作DOM的方便性，我们可以选择jQuery来绘制甘特图。至于数据传输，毫无疑问选择JSON。a)首先需要在页面上用table实现基本效果b)再根据查询出来的开始和结束年份，用jQuery动态添加到表头中c)然后将记录添加到table中d)最后就是用jQuery绘制甘特图。甘特图以季度为刻度，一刻度占用一个单元格。甘特图效果以td的背景色显示，如果从第三个刻度开始，甘特图前方就新增一个td并占用三个单元

3、格。甘特图长度有几个季度就占用多少个单元格。一、实现根据分析逐步实现甘特图甘特图实现1、后台数据处理需要查询工程进度最新主表记录及其从表记录，还需要得到开始年份和结束年份，最重要的甘特图所需数据的处理。a)新建主表类Prorate和从表类ProrateLineProrate表：其中prorateLineList为从表集合privateStringproratenum;privateStringprorateStartDate;privateStringprorateEndDate;privateString

4、prodate;privateStringenterby;privateStringenterdate;privateListprorateLineList;ProrateLine表：其中“//用于甘特图显示的数据字段”注释下的都是甘特图所需数据字段privateProrateprorate;privateIntegerprorateLineId;privateStringprorateNum;privateStringseq;privateStringproName;privat

5、eStringplanstartdate;privateStringplanenddate;privateStringactstartdate;privateStringactenddate;privateStringiplanstartdate;privateStringiplanenddate;privateStringiactstartdate;privateStringiactenddate;privatedoublefinishrate;privateStringiscontrol;private

6、doubleifinishrate;privateStringiiscontrol;privateStringisstartcenter;privateStringmemo;privateStringimemo;//用于甘特图显示的数据字段privateintplan;privateintplanNext;privateintplanPrev;privateintact;privateintactNext;privateintactPrev;privateintiplan;privateintiplanNe

7、xt;privateintiplanPrev;privateintiact;privateintiactNext;privateintiactPrev;a)新建数据处理类ProrateDAOProrateDAO负责查询数据并处理数据1.首先需要查出主记录中最新一条记录，新建方法findProrate()。主要代码如下Stringsql="select*from(select*fromprorateorderbyprodatedesc)whererownum=1";rs=stmt.executeQuery(s

8、ql);while(rs!=null&&rs.next()){prorate=newProrate();prorate.setEnterby(rs.getString("enterby"));prorate.setEnterdate(rs.getString("enterdate"));prorate.setProdate(rs.getString("prodate"));prorate.setProratenu