jQueryGantt甘特图的使用与说明（含自定义修改内容）

最新推荐文章于 2024-08-23 08:35:18 发布

kitty_ELF

最新推荐文章于 2024-08-23 08:35:18 发布

阅读量4.3k

点赞数 1

分类专栏：学习记录文章标签： javascript css

本文链接：https://blog.csdn.net/kitty_ELF/article/details/115372372

版权

本文详细介绍了如何使用jQueryGantt，包括下载资源、解决中文乱码问题、样式优化以及如何实现甘特图头部信息的悬浮显示。通过修改js和css文件，实现了甘特图的数据条颜色扩展、最小高度设置、左侧信息宽度调整等，并提供了悬浮框的html、css和js实现方法。

摘要由CSDN通过智能技术生成

项目需要，在网上找了许多开源免费的甘特图资源考虑到自定义拓展和应用的难易程度最后原则了jQueryGantt甘特图，接下来就记录一下自己的使用过程。本文章主要包括以下内容：

1.jQueryGantt下载

这里感谢一下这位朋友的分享 JQuery.Gantt（甘特图）开发指南 , 附下载资源
我就是下载了他的资源并对test1的 js和css进行了扩展 test2的效果图也不错有兴趣的朋友可以自己扩展一下。

2.jQueryGantt的引用与说明（解决中文日期utf-8编码格式乱码问题）

js、css的引用很简单，参考test1中的index.html就可以，把js、css、img都引用到自己的项目中即可。
这里重点想说的就是中文乱码问题，上面的文章告诉我们在js文件引用中加上charset特性并设置为GB2312来解决这个问题。但是我习惯用utf-8编码，所以就事先修改原js的编码格式再进行修改：
1.首先用记事本打开jquery.fn.gantt.js；
2.另存为，选择“带有BOM的UTF-8”编码方式
在这里插入图片描述

这个方法同理可以解决各种需要转编码格式的问题。
jquery.fn.gantt.js文件中$.fn.gantt = function (options)中修改以下部分，即可显示中文月份与日期

dow: ["日", "一", "二", "三", "四", "五", "六"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

接下来是html部分：

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

直接一个div引用，因为自己想要一个平铺布满这个屏幕的甘特图所以对于样式进行了一点点的优化，具体可参考下一部分。

引用jQueryGantt的js方法：
配合我的效果图对数据源格式进行说明
在这里插入图片描述

//初始化gantt
   $(".gantt").gantt({
   
   //source：甘特图数据源 
       source: [
           {
   
               name: "100002",
               desc: "32一体化传感器（电子式）",
               values: [{
   
                   from: "2021-03-05", //时间单位为毫秒 试了一下这种格式的也是可以的
                   to: "2021-03-24",
                   label: "20",
                   customClass: "ganttRed", //甘特图数据条的颜色，有ganttRed ganttGreen ganttOrange ganttBlue（默认），可自定义在css中扩展
                   dataObj: {
   id:"0001"} //onItemClick方法中的data  我也是看了源码之后才知道有dataObj这个属性
               }, {
   
                   from: "2021-03-26",
                   to: "2021-03-30",
                   label: "5",
                   customClass: "ganttBlue",
                   dataObj: {
   id:"0002"}
               }]
           },
           {
   
               name: "100002",
               desc: "32一体化传感器（电子式）",
               values: [{
   
                   from: "2021-04-10",
                   to: "2021-04-30",
                   label: "21",
                   customClass: "ganttGreen",
                   dataObj: {
   

                   }
               }]
           }
       ],  
       navigate: 'scroll',//底部使用的是拖拽进度还是按钮：scroll和buttons
       scale: "days",// 设置默认比例，选项：months  weeks days  hours
       maxScale: "months",//最大比例，选项如上
       minScale: "days",//最小比例，选项如上
       itemsPerPage: 999,//甘特图每页的信息数量
       onItemClick: function (data) {
   
           console.log(data);//这里的data就是source values中的dataObj
       },
       onAddClick: function () <