jQuery Gantt Package使用教程：如何实现任务甘特图

jQuery Gantt控件是一个真正的跨平台，基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件，可满足您所有基于gantt的可视化需求。还带有ASP.NET WebControl和MVC扩展，可轻松集成到现有应用中。

jQuery Gantt Package正式版

要怎么用jQuery Gantt Package来显示任务的完成进度呢在就跟着小编来了解一下吧！

由于项目需要，要以甘特图的形式来体现任务的完成进度，所以我从 上下载了了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：

JQueryGantt需要的Json数据格式（data）：

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

具体的参数含义：

最后就是可能会根据具体的需求做一些源码的修改，下面提一下我修改过的几个地方：

1、因为在 初始化gantt的时候可以设置scale（ 设置默认比例。这里总共有四个参数：months weeks days hours.） 参数来设定相应的比例。如果你任务的时间间隔太短，会造成甘特图无法平铺完整，如下图：

这个时候可以对jquery.fn.gantt.js里的getMaxDate和getMinDate两个方法做部分修改,也就是下面两段代码：

根据你所用的scale比例做对应的修改，我定义的days，所以 将maxDate这里改成了30，maxDate.setDate(maxDate.getDate() + 30),改后的效果：

2、可以看到，源码里面甘特图上的月份，周都是英文，如果你需要显示中文的话，还是修改jquery.fn.gantt.js里的方法

修改settings，将dow和months里面的参数改成对应的中文就行了。

补充部分源码方法及代码说明：

代码说明：

jquery.cookie.js：

• 用于cookie管理，如果需要在甘特图中使用cookie则需要在页面中引用该js文件，否则不需要引用。

jquery.fn.gantt.js：

代码结构解析：

• $.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：值）： .extend( .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 () {}

本教程内容就是这样了，希望对您有所帮助~感兴趣的朋友可以下载jQuery Gantt Package试用版免费体验~

相关产品推荐：

VARCHART XGantt是一个功能全面的交互式甘特图控件，其模块化的设计让您可以创建满足您和您的客户所需求的应用程序。（我们领先的甘特图控件VARCHART XGantt可用于.NET，ActiveX应用程序。）除此之外，同时还具有一个稳定可靠的甘特图工具，在编写第一行代码之前，您就可以知道是否可以满足客户的需求。

EV-APS是科技15年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。

AnyGantt是完全跨浏览器和跨平台的，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或简单的HTML页面。有了AnyGantt你可以从任何地方可视化数据：从文本、Excel、CSV格式中的文件到MySQL、MS SQL以及Oracle数据库服务器。

想要购买该产品正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：