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

转帖|使用教程|编辑:莫成敏|2020-04-20 16:07:22.307|阅读 635 次

概述:本文介绍了如何使用jQuery Gantt Package实现任务甘特图。

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

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" /
                }]
            }

具体的参数含义:

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

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

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

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

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

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

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

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

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

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

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

修改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:值): .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数据库服务器。


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



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:CSDN

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat