JS甘特图 JQuery.Gantt

页面导航:首页 > 网络编程 > JavaScript > JS甘特图 JQuery.Gantt

JS甘特图 JQuery.Gantt

来源: 作者: 时间:2016-02-04 09:15 【

JQuery Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。它既可以图形化行程安排,也可以展示数据分布。本人在原有基础上,修改了部分代码,较原有功能外

JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS库。它既可以图形化行程安排,也可以展示数据分布。

本人在原有基础上,修改了部分代码,较原有功能外,主要改进为:

1、修正“某一条数据为空时原有的代码js会报错的问题”。

2、修正“ie显示时进度条会闪烁的问题”。

3、json的数据不再为new Date(时间戳)的形式,直接为时间戳

 

页面展示为:

data-cke-saved-src=/uploads/allimg/c160204/145454S09110-1G93.png

其中,框1为上下翻页,框2表示滚动到当前时间,框3为滚动条和滚动按钮,框4为显示粒度切换。

代码引入:

 

注意若你引入的jquery为1.9+,则需要引入js/jquery-migrate-1.2.1.min.js,因为jquery1.9+取消了对$.browser的支持,若不引入升级包,则js运行出错

 

产生图表的js代码如下:

 

$('选择器').gantt({
	source: source,	//显示的数据,见下面分析
	navigate: scroll,	//显示成scroll还是buttons
	months: [January, February, March, April, May, June, July, August, September, October, November, December],	//月份显示的语言
	dow: [S, M, T, W, T, F, S],	//星期显示的语言
	scale: weeks,	//默认显示的粒度
	maxScale: months,	//最大显示的粒度
	minScale: days,	//最小显示的粒度
	itemsPerPage: 18,	//每页显示的数目
	onItemClick: function(data) {	//进度条显示的单击事件,data参见source定义
		//alert(Item clicked - show some details + data);
	},
	onAddClick: function(dt, rowId) {	//图表空白处的单击事件
		
	},
	onRender: function() {	//渲染时的事件
		
	}
});

上面source表示数据来源,其格式如下:

 

 

source:[
	{
        name:Example,		//一行的标题
        desc:Something,	//某行的描述
        values:[{
			from:1333411200000,	//起始时间,13位时间戳,这里不同于原版/Date(1333411200000)/
			to:1328832000000,		//终止时间,13位时间戳,这里不同于原版/Date(1333411200000)/
			desc:Something,		//描述 www.2cto.com
			label:Example Value,	//显示在进度条上的标签
			customClass:ganttRed,	//显示的颜色,基本上都是gantt+颜色名词
			dataObj: dataObj		//onclick等事件传入的数据对象
		}]
	}
]

 

其他的参数可参考[1]

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<