你的位置:首页 > Java教程

[Java教程]JQuery.Gantt(甘特图)开发


一、简介

JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。

 11

 二、前端页面

 2.1 资源引用

    首先需要将下载到的源码中的CSS、IMG、JS等资源放入我们自己的项目中,然后在我们自己的页面中引用需要的资源文件。

 CSS样式文件

<link rel="stylesheet" href="css/style.css" />

 JS脚本文件

<script src="js/jquery-1.8.2.min.js"></script>

<script src="js/jquery.fn.gantt.js" charset ="GB2312"></script>

<script src="js/jquery.cookie.js"></script> //任务甘特图中没有使用cookies所以不需要引用jquery.cookie.js。

 

备注:

      1.jquery.cookie.js  用于cookie管理,如果在甘特图中使用cookie则要在页面 中引用该js文件,否则不需要。任务甘特图中没有使用cookies所以不需要引用

      2.jquery.fn.gantt.js  JQuery.Gantt组件的核心脚本文件,所有的甘特图功能代码都在这个文件中。

     3.如果需要甘特图中显示中文,则需要在js文件引用中加上charset特性并设置为GB2312,否则中文内容将显示为乱码。

 

 

 

 2.2 页面布局

   在需要显示甘特图的地方加入以下这个div。

<div ></div>  //用于显示甘特图(如果不更改源码的话此div的class要为“gantt” 建议不要修改此calss名字,如果修改的话,css与js中都要做相应的修改。)

 

 三、组件配置

 

 3.1 Gantt 配置

 

$(".selector").gantt({

        source:"ajax/task.json",

         scale:"weeks",

        minScale:"weeks",

        maxScale:"months",

        onItemClick:function(data){

                alert("Item clicked - show some details");},

        onAddClick:function(dt, rowId){

                alert("Empty space clicked - add an item!");},

        onRender:function(){

                console.log("chart rendered");}});

参数

默认值

接收类型

source

null

Array, String (url)

itemsPerPage

7

Number

months

["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

Array

dow

["S", "M", "T", "W", "T", "F", "S"]

Array

navigate

"buttons"

String ("buttons","scroll")

scale

"days"

String

maxScale

"months"

String

minScale

"hours"

String

waitText

"Please Wait..."

String

onItemClick:

function (data) { return; }

有数据范围内的点击事件

onAddClick

function (dt, rowId) { return; }

无数据范围内的点击事件

onRender

function () { return; }

渲染事件

useCookie

false

如果需要使用cookie则需要引用JS脚本文件:
jquery.cookie.js 

scrollToToday

true

Boolean

 

 

 3.2 Source 配置

 

source:[{

        name:"Example",

        desc:"Lorem ipsum dolor sit amet.",

        values:[...]}]

参数

默认值

接收类型

备注

name

null

String

每一行最左侧的一列以粗体显示

desc

null

String

每一行左侧第二列

values

null

Array

甘特图日期范围项

 

 

 3.3 Value 配置

 

values:[{

        to:"/Date(1328832000000)/",from:"/Date(1333411200000)/",

        desc:"Something",

        label:"Example Value",

        customClass:"ganttRed",

        dataObj: foo.bar[i]}]

参数

接收类型

备注

to

String (Date)

结束时间,以毫秒为换算单位

from

String (Date)

开始时间,以毫秒为换算单位

desc

String

鼠标悬停显示文本

label

String

甘特项显示文本

customClass

String

甘特项的自定义class

dataObj

All

一个直接应用于甘特项的数据对象

 

 

3.4 代码结构解析:

 

 $.fn.gantt = function (options):甘特图部件对象

 基础设置项

 cookieKey:cookie的键

 scales:时间范围的级别 例如:["hours", "days", "weeks", "months"]

 settings:部件设置集

 source:数据源

 itemsPerPage:分页的每页数据行数

 months:列头处月份名称

 dow:列头处星期名称

 startPos:默认开始位置日期

 navigate:底部导航,buttons为按钮式的,scroll为滑块式的

 scale:甘特图每一列的时间范围

 useCookie:是否使用cookie,如果使用需要引用jquery.cookie.js

 maxScale:最大时间范围

 minScale:最小时间范围

 waitText:等待提示文本

 onItemClick:有数据范围内点击事件

 onAddClick:无数据范围内点击事件

 onRender:渲染事件

 scrollToToday:设置是否滚动到今天

 选择器方法(a:元素,i:索引,m:值): $.extend($.expr[":"], {});

 findday:以毫秒为时间单位匹配一个指定的日期

 findweek:以毫秒为时间单位匹配一个指定的周

 findmonth:以毫秒为时间单位匹配一个指定的月

 日期原型

 Date.prototype.getWeekId:获取weekid用于标识week的div的id特性,返回字符串,格式为dh-YYYY-WW,其中的ww是一年中的第几周

 Date.prototype.genRepDate:按部件设置属性中scale的值获取时间范围,以秒为时间单位

 Date.prototype.getDayOfYear:获取日期在一年中的第几天

 Date.prototype.getWeekOfYear:获取日期在一年中的第几周

 Date.prototype.getDaysInMonth:获取日期所在月份的天数

 Date.prototype.hasWeek:如果日期驻留在一周的边界,返回真

 Date.prototype.getDayForWeek:返回一周的开始日期的日期对象

 Grid管理器(负责导航和渲染):core

 elementFromPoint:获取位于指定点的最高处的元素

 create:创建图表

 init:初始化视图,计算行数、页数、可见的开始时间与结束时间

 render:渲染grid

 leftPanel:创建左侧Panel

 dataPanel:创建右侧数据Panel

 rightPanel:创建右侧头部Panel

 navigation:导航

 createProgressBar:创建进度条

 markNow:移除”wd“class添加”today“class到当前的scale模式

 fillData:填充图表,解析数据并填充到panel

 navigateTo:导航到

 navigatePage:导航到指定的页面

 zoomInOut:变更空间轴级次(zoom)

 mouseScroll:通过鼠标移动图表

 wheelScroll:通过鼠标滚轮移动图表

 sliderScroll:通过滑块控制图表

 scrollPanel:更新滚动panel的margin

 synchronizeScroller:同步滚动

 repositionLabel:重新定位数据标签

 waitToggle:切换等待

 实用功能:tools

 getMaxDate:返回最大可能的日期在scale值的标准下

 getMinDate:返回最小可能的日期在scale值的标准下

 parseDateRange:返回一个日期对象数组介于from和to之间,时间单位为天

 parseTimeRange:返回一个日期对象数组介于from和to之间,时间单位为小时

 parseWeeksRange:返回一个日期对象数组介于from和to,时间单位为周

 parseMonthsRange:返回一个日期对象数组介于from和to,时间单位为月

 dateDeserialize:从字符串反序列化成日期

 genId:用日期创建ID

 getCellSize:获取当前单元格的大小

 getRightPanelSize:获取当前右panel的大小

 getPageHeight:获取当前页面的高度

 getProgressBarMargin:获取当前进度条的margin大小

选项扩展:this.each(function () {};);