JQuery.Gantt(甘特图)开发

一、简介

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

二、前端页面

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 class="gantt"></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 () {};);

时间: 2024-10-09 21:04:40

JQuery.Gantt(甘特图)开发的相关文章

jquery 甘特图开发指南

JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库. <link rel="stylesheet" href="css/style.css" /><script src="js/jquery-1.7.min.js"></script><script src="js/jquery.fn.gantt.js" charset ="GB

gantt甘特图的制作过程

甘特图主要是用来做项目管理的,可以清楚的看到任务间的逻辑关系,任务与时间关系和任务间并行关系. 在甘特图中,横轴方向表示时间,纵轴方向并列着活动列表.图表内可以用线条.数字.文字代号等来表示计划(实际)所需时间,计划(实际)输出,计划(实际)开工或完工时间等. 1.根据计划列出所有任务 对于每一个任务,不管这项任务是并行任务或者是线性任务,列出任务的启动时间,估算完成该任务所需要花费的时间.如果本项任务是线性任务,同时也列出这项任务所依赖的任务,最后使用表格的方式将所有的任务按先后顺序列出.下面

KS Gantt甘特图控件通过递归加载无限层级的数据

从服务器拉下来的数据,是反序列后的对象数据,通过id和parentid可以组织成对象树,然后将对象树绑定到甘特图控件上. public class KSGanttHelper { #region 往界面添加项 public static void FillDataToGanttControl(List<ConstructionTaskItemTree> taskItemTreeList, Gantt gantt) { gantt.SuspendItemLayout(); taskItemTre

使用GridVIew显示Gantt(甘特图),动态增减列

说明:本例是做了工厂的排机报表 一.根据查询日期初始化GridView列 private void IniGridView(DateTime p_DateS,DateTime p_DateE) { //1.移除机台以外的列 for (int i = gridView1.Columns.Count - 1; i >= 0; i--)//从后向前遍历删除,否则会引起混乱.不用foreach也是出于此原因 { if (gridView1.Columns[i].FieldName != "Mach

Twproject Gantt开源甘特图功能扩展

1.Twproject Gantt甘特图介绍 Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CSS 皮肤等功能.更重要的是,它是免费开源的. 官网地址是:https://gantt.twproject.com/ 源码可以从github下载: 2.扩展功能一:code自动层级编码,满足wbs编码要求 工作分解结构 (WBS) 代码是项目的识别您的分级显示结构中的每个任务的唯一位置的字母数字代码.

jquery甘特图免费下载

Silverlight Gantt甘特图是一款非常丰富,可定制,轻量级和高性能的控件. 项目甘特图: 可视化层次的任务列表. 可移动和拖拽调整条形图 可视化时间编辑器 编辑任务依赖关系 调整任务进度条 关键路径.自定义外观.自定义行列.自定义任务颜色等 高质量打印甘特图 资源甘特图: 实现资源利用视图. 重叠渲染任务 FlexyGantt与依赖连线 可折叠的任务汇总信息 资源分配阈值的可视化界面 服务器状态的可视化界面 Virtualized Redering使您随时显示数千条记录. 一个完全兼

jquery甘特图开发包免费下载地址

Silverlight Gantt甘特图是一款非常丰富,可定制,轻量级和高性能的控件. 项目甘特图: 可视化层次的任务列表. 可移动和拖拽调整条形图 可视化时间编辑器 编辑任务依赖关系 调整任务进度条 关键路径.自定义外观.自定义行列.自定义任务颜色等 高质量打印甘特图 资源甘特图: 实现资源利用视图. 重叠渲染任务 FlexyGantt与依赖连线 可折叠的任务汇总信息 资源分配阈值的可视化界面 服务器状态的可视化界面 Virtualized Redering使您随时显示数千条记录. 一个完全兼

EJS甘特图控件下载购买地址

EJS Gantt甘特图是基于JavaScript/Html5核心库的开发的,基于WEB浏览器的甘特图解决方案.支持: 日历设置,WBS分解,工期设置,关联性设定,关键路径,计划排程等.可应用于项目管理系统. 生产执行系统(MES).资源管理 系统(ERP)或其它的任务资源分配相关领域的应用程序的.EJS Gantt甘特图可与任意后端代码(.net, jsp)集成为jsp甘特图,asp.net甘特图等. EJS Gantt甘特图功能特点: 对于项目的管理,计划以及调度任务具有可用性 它可被当做是

EJS甘特图演示地址及免费下载地址

EJS Gantt甘特图是基于JavaScript/Html5核心库的开发的,基于WEB浏览器的甘特图解决方案.支持: 日历设置,WBS分解,工期设置,关联性设定,关键路径,计划排程等.可应用于项目管理系统. 生产执行系统(MES).资源管理 系统(ERP)或其它的任务资源分配相关领域的应用程序的.EJS Gantt甘特图可与任意后端代码(.net, jsp)集成为jsp甘特图,asp.net甘特图等. EJS Gantt甘特图功能特点: 对于项目的管理,计划以及调度任务具有可用性 它可被当做是

jQuery Gantt Edit:(一)参数以及方法说明

jQuery Gantt editor jQuery Gantt Edit(以下简称GE)是一款开源的基于jQuery的甘特图插件,作者:robicch. GitHub地址:https://github.com/robicch/jQueryGantt 首先是GE的主要特点: 基于jQuery MIT许可:你可以在任何地方重复使用 json数据传输 全世界都可用 任务管理与工作流处理 管理任务依赖(从属) 管理作业(资源,角色,进度) 服务器同步 支持撤销重做 浏览器兼容(可以兼容IE8及以上版本