jQuery绘甘特图.docVIP

jQuery绘制甘特图 任务需求 任务需求：需要在maximo中以甘特图方式显示工程进度，如图： 分析 在Maximo应用程序设计器中无法实现所需要求，甘特图实现需要在maximo中嵌套jsp。 分析用web技术实现甘特图 整理绘制甘特图所需的数据。“工程进度、名称、进度、受控、备注”这些数据可以直接从数据库查询；我们需要处理的是表头的年份和甘特图的开始位置、长度。 需要得到表头的年份，这个可以根据工程进度记录的开始时间和结束时间获取到 甘特图的开始位置及长度，开始位置可以根据该条记录开始时间和开始年份时间相减得到，长度则是该条记录的开始时间和结束时间。 根据数据绘制甘特图步履 jQuery有强大的选择器和操作DOM的方便性，我们可以选择jQuery来绘制甘特图。至于数据传输，毫无疑问选择JSON。 首先需要在页面上用table实现基本效果 再根据查询出来的开始和结束年份，用jQuery动态添加到表头中 然后将记录添加到table中 最后就是用jQuery绘制甘特图。甘特图以季度为刻度，一刻度占用一个单元格。甘特图效果以td的背景色显示，如果从第三个刻度开始，甘特图前方就新增一个td并占用三个单元格。甘特图长度有几个季度就占用多少个单元格。 实现 根据分析逐步实现甘特图 甘特图实现 后台数据处理 需要查询工程进度最新主表记录及其从表记录，还需要得到开始年份和结束年份，最重要的甘特图所需数据的处理。 新建主表类Prorate和从表类ProrateLine Prorate表： 其中prorateLineList为从表集合 private String proratenum; private String prorateStartDate; private String prorateEndDate; private String prodate; private String enterby; private String enterdate; private ListProrateLine prorateLineList; ProrateLine表： 其中“//用于甘特图显示的数据字段private Prorate prorate; private Integer prorateLineId; private String prorateNum; private String seq; private String proName; private String planstartdate; private String planenddate; private String actstartdate; private String actenddate; private String iplanstartdate; private String iplanenddate; private String iactstartdate; private String iactenddate; private double finishrate; private String iscontrol; private double ifinishrate; private String iiscontrol; private String isstartcenter; private String memo; private String imemo; //用于甘特图显示的数据字段 private int plan; private int planNext; private int planPrev; private int act; private int actNext; private int actPrev; private int iplan; private int iplanNext; private int iplanPrev; private int iact; private int iactNext; private int iactPrev; 新建数据处理类ProrateDAO ProrateDAO负责查询数据并处理数据 首先需要查出主记录中最新一条记录，新建方法findProrate()。主要代码如下 String sql = select * from (select * from prorate order