使用jQuery.Gantt实现任务甘特图

由于项目需要,要以甘特图的形式来体现任务的完成进度,所以我从网上下载了了jQuery.Gantt的源码,并在此基础上做了部分修改以满足项目需求。

下面是最终实现效果:在这里插入图片描述
一:
首先我们拿到源码以后,把CSS、img、JS等资源放入我们自己的项目中,然后在具体的页面引用需要的资源:
css样式引用:

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

< js脚本引用:

     <script src="js/jquery-2.1.4.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <script src="js/jquery.fn.gantt.js" charset ="GB2312">></script>
     <script src="js/prettify.min.js"></script>

为了防止中文乱码,引用js文件的时候上charset特性并设置为GB2312。

最后在需要展现甘特图的地方加上以下div:

   <div class="gantt"></div>

展示的时候可以给甘特图套上一个div:

<div class="gantt_ot" style="width:800px; margin:100px auto;">
    <div class="gantt"></div>
 </div>

长宽根据实际情况来定;

下面是具体显示的js:

   $(document).ready(function() {
   $.ajax({
	url : contextPath + "/pro/ganttChart/", //请求后台,并返回甘特图需要的json数据
	type : "post",
	data : "proId=" + proId,
	dataType : "JSON",
	cache : false, //关闭AJAX缓存
	success : function(data) {

		//初始化gantt
		$(".gantt").gantt({
			source : data,
			navigate : 'scroll', 底部使用拖拽的刻度尺还是按钮:scroll和buttons
			scale : "days",// 这里是设置默认比例。这里总共有四个参数:months  weeks days  hours.
			maxScale : "months", // 这里是设置最大比例。这里总共有四个参数:months  weeks days  hours.
			minScale : "days", // 这里是设置最小比例。这里总共有四个参数:months  weeks days  hours.
			itemsPerPage : 20, //设置甘特图每页显示多少条
			onItemClick : function(data) {//有数据范围内的点击事件
			//	 alert(name);
			},
			onAddClick : function(dt, rowId) {//无数据范围内的点击事件
				// alert("Empty space clicked - add an item!");
			},
			onRender : function() {//渲染事件
				if (window.console && typeof console.log === "function") {
					// console.log("chart rendered");
				}
			}
		});
	}
});

//弹窗功能
$(".gantt").popover({
	selector : ".bar",
	title : "I'm a popover",
	content : "And I'm the content of said popover.",
	trigger : "hover",
	placement : "auto right"
});  });

JQueryGantt需要的Json数据格式(data):

 {
                name: "任务",
                desc: "任务描述",
                values: [{
                    from: "/Date(1320192000000)/", 
                      to: "/Date(1320592000000)/",
                    label: "",
                    customClass: "ganttRed" /
                }]
            }

具体的参数含义:

参数接收类型及含义
nameString/左侧任务标题
descString/左侧任务描述或者其他备注
valuesArray/甘特图具体的配置参数
values/ toString (Date)/结束时间,以毫秒为换算单位
values/ fromString (Date)/开始时间,以毫秒为换算单位
values/descString /鼠标悬停显示文本
values/ labelString/甘特项显示文本
values/ customClassString/甘特项的自定义class(颜色等)

最后就是可能会根据具体的需求做一些源码的修改,下面提一下我修改过的几个地方:
1.因为在 初始化gantt的时候可以设置scale( 设置默认比例。这里总共有四个参数:months weeks days hours.) 参数来设定相应的比例。如果你任务的时间间隔太短,会造成甘特图无法平铺完整,如下图:

这个时候可以对jquery.fn.gantt.js里的getMaxDate和getMinDate两个方法做部分修改,也就是下面两段代码:
在这里插入图片描述
在这里插入图片描述
根据你所用的scale比例做对应的修改,我定义的days,所以 将maxDate这里改成了30,maxDate.setDate(maxDate.getDate() + 30),改后的效果:
在这里插入图片描述
基本ok。

2.可以看到,源码里面甘特图上的月份,周都是英文,如果你需要显示中文的话,还是修改jquery.fn.gantt.js里的方法
在这里插入图片描述
修改settings,将dow和months里面的参数改成对应的中文就行了。

补充部分源码方法及代码说明:
代码说明:
jquery.cookie.js:
用于cookie管理,如果需要在甘特图中使用cookie则需要在页面中引用该js文件,否则不需要引用。
jquery.fn.gantt.js:
JQuery.Gantt组件的核心脚本文件,所有的甘特图功能代码都在这个文件中。
代码结构解析:
$.fn.gantt = function (options):甘特图部件对象
基础属性:
cookieKey:cookie的键
scales:时间范围的级别
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:值): . e x t e n d ( .extend( .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 () {}?;

  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值