jQuery繪制甘特圖

《jQuery繪制甘特圖》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、jQuery繪制甘特圖一、任務(wù)需求任務(wù)需求：需要在maximo中以甘特圖方式顯示工程進(jìn)度，如圖：二、分析在Maximo應(yīng)用程序設(shè)計(jì)器中無(wú)法實(shí)現(xiàn)所需要求，甘特圖實(shí)現(xiàn)需要在maximo中嵌套jsp。分析用web技術(shù)實(shí)現(xiàn)甘特圖1、整理繪制甘特圖所需的數(shù)據(jù)?！肮こ踢M(jìn)度、名稱(chēng)、進(jìn)度、受控、備注”這些數(shù)據(jù)可以直接從數(shù)據(jù)庫(kù)查詢(xún)；我們需要處理的是表頭的年份和甘特圖的開(kāi)始位置、長(zhǎng)度。a)需要得到表頭的年份，這個(gè)可以根據(jù)工程進(jìn)度記錄的開(kāi)始時(shí)間和結(jié)束時(shí)間獲取到b)甘特圖的開(kāi)始位置及長(zhǎng)度，開(kāi)始位置可以根據(jù)該條記錄開(kāi)始時(shí)間和開(kāi)始年份

2、時(shí)間相減得到，長(zhǎng)度則是該條記錄的開(kāi)始時(shí)間和結(jié)束時(shí)間。2、根據(jù)數(shù)據(jù)繪制甘特圖步履jQuery有強(qiáng)大的選擇器和操作DOM的方便性，我們可以選擇jQuery來(lái)繪制甘特圖。至于數(shù)據(jù)傳輸，毫無(wú)疑問(wèn)選擇JSON。a)首先需要在頁(yè)面上用table實(shí)現(xiàn)基本效果b)再根據(jù)查詢(xún)出來(lái)的開(kāi)始和結(jié)束年份，用jQuery動(dòng)態(tài)添加到表頭中c)然后將記錄添加到table中d)最后就是用jQuery繪制甘特圖。甘特圖以季度為刻度，一刻度占用一個(gè)單元格。甘特圖效果以td的背景色顯示，如果從第三個(gè)刻度開(kāi)始，甘特圖前方就新增一個(gè)td并占用三個(gè)單元

3、格。甘特圖長(zhǎng)度有幾個(gè)季度就占用多少個(gè)單元格。一、實(shí)現(xiàn)根據(jù)分析逐步實(shí)現(xiàn)甘特圖甘特圖實(shí)現(xiàn)1、后臺(tái)數(shù)據(jù)處理需要查詢(xún)工程進(jìn)度最新主表記錄及其從表記錄，還需要得到開(kāi)始年份和結(jié)束年份，最重要的甘特圖所需數(shù)據(jù)的處理。a)新建主表類(lèi)Prorate和從表類(lèi)ProrateLineProrate表：其中prorateLineList為從表集合privateStringproratenum;privateStringprorateStartDate;privateStringprorateEndDate;privateString

4、prodate;privateStringenterby;privateStringenterdate;privateListprorateLineList;ProrateLine表：其中“//用于甘特圖顯示的數(shù)據(jù)字段”注釋下的都是甘特圖所需數(shù)據(jù)字段privateProrateprorate;privateIntegerprorateLineId;privateStringprorateNum;privateStringseq;privateStringproName;privat

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

6、doubleifinishrate;privateStringiiscontrol;privateStringisstartcenter;privateStringmemo;privateStringimemo;//用于甘特圖顯示的數(shù)據(jù)字段privateintplan;privateintplanNext;privateintplanPrev;privateintact;privateintactNext;privateintactPrev;privateintiplan;privateintiplanNe

7、xt;privateintiplanPrev;privateintiact;privateintiactNext;privateintiactPrev;a)新建數(shù)據(jù)處理類(lèi)ProrateDAOProrateDAO負(fù)責(zé)查詢(xún)數(shù)據(jù)并處理數(shù)據(jù)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