jquery.gantt版甘特图实战使用教程附源码下载

由于项目需要，需要做一个进度甘特图。要求使用jQueryGantt来实现，在网上看了很多博客，终于找了几篇比较有用的。但是仅仅靠这几篇文章和一个demo无法满足项目的需求，所以研究了下jQueryGantt的源码，根据项目需求进行了一些改动。由于网上对于jQueryGantt的文章较少，很多都不完整，所以特此写下这篇文章进行记录，顺便分享有需要的人。

1.jQueryGantt下载

官方演示地址：http://taitems.github.io/jQuery.Gantt
我此次使用的是Github上一位网友发布的一个版本：https://github.com/ybx13579/jQuery.Gantt
这是他写的一份指南：https://blog.csdn.net/yangbingx/article/details/73470030
非常感谢，大家喜欢的记得给他一个star。

2.运行

这里的说明并不是很详细，具体参考test1文件夹中的index.html
将css，js，img放入工程项目中，并参考test1/index.html 中的引入。

注：如果需要甘特图中显示中文，则需要在js文件引用中加上charset特性并设置为GB2312，否则中文内容将显示为乱码。

<script src="js/jquery.fn.gantt.js" charset ="GB2312"></script>
之后在html页面上写一个div

   <style type="text/css">
        body {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 13px;
            padding: 0 0 50px 0;
        }

        .contain {
            width: 800px;
            margin: 0 auto;
        }
    </style>


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

<script type="text/javascript">
    $(function () {
        var sourceData;
        $.ajax({
            url: "/test/getGanttData", //请求后台，并返回甘特图需要的json数据
            type: "post",
            dataType: "json",
            cache: false, //关闭AJAX缓存
            data: {"id": 1}, //传入的查询参数
            success: function (data) {

                //初始化gantt
                $(".gantt").gantt({
                    source: data,
                    navigate: 'scroll',//// 底部使用拖拽的刻度尺还是按钮：scroll和buttons
                    scale: "weeks",// 这里是设置默认比例。这里总共有四个参数：months  weeks days  hours.
                    maxScale: "months", // 这里是设置最大比例。这里总共有四个参数：months  weeks days  hours.
                    minScale: "days", // 这里是设置最小比例。这里总共有四个参数：months  weeks days  hours.
                    itemsPerPage: 20, //设置甘特图每页显示多少条
                    onItemClick: function (data) {//有数据范围内的点击事件
                        // alert("Item clicked - show some details");
                    },
                    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"
          });*/

        //prettyPrint();
    });


</script>

JQueryGantt需要的Json数据格式

[

                {
                    name: "task1",
                    desc: "",
                    values: [{
                        from: "/Date(1320192000000)/", //这里需要的时间为毫秒
            //。计算方式为时间变量减去时间初始值（1970-1-1）的差值换算为毫秒
                          to: "/Date(1320592000000)/",
                        label: "这是label",
                        customClass: "ganttRed" //这里是这条记录的在甘特图上的颜色
                    }]
                }, {
                    name: "task2",
                    desc: "这是描述",
                    values: [{
                        from: "/Date(1322611200000)/",
                        to: "/Date(1323302400000)/",
                        label: "",
                        customClass: "ganttGreen"
                    }]
                }]
如果你是使用的Java来编写的话，我这里提供一下后台处理json数据的思路。
首先，最外层的是一个List集合。然后里面的name,desc,values使用Map进行封装。而values里面又是一个集合，所以values整个呢诶容是一个List集合。而内部的from,to,label等参数又需要使用Map以[key,value]的形式保存。所以又要封装一个Map。



3.修改jQueryGantt的核心文件来满足项目的需求



/Default settings 默认设置
var settings = {
            source: [],
            holidays: [],
            // 默认的页数
            itemsPerPage: 7,
            // localisation
            // dow: ["S", "M", "T", "W", "T", "F", "S"],
            //面板上的星期，只能为一个字，两个字会被挤出来
            dow: ["日", "一", "二", "三", "四", "五", "六"],
            //面板上的月份
            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
          //甘特图在渲染的时候显示的提示文字
            waitText: "加载中，请稍候...",
            // 底部使用拖拽的刻度尺还是按钮：scroll和buttons
            navigate: "buttons",
            //网格加载完毕后是否自动滚动到今天，true为是 false为不需要
            scrollToToday: false,
            // cookie options
            useCookie: false,
            cookieKey: "jquery.fn.gantt",
            // scale parameters
            scale: "days",
            maxScale: "months",
            minScale: "hours",
            // callbacks
            onItemClick: function (data) {
                return;
            },
            onAddClick: function (dt, rowId) {
                return;
            },
            onRender: $.noop
        };

2.底部的控件居中

打开jQueryGantt的style.css

.gantt {
    width: 100%;
    margin: 0 auto; //清除掉上下间距
    border: 14px solid #ddd;
    position: relative;
    -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
        border-radius: 6px;
  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

//设置底部控件位置（前端技术有限，就这样简单的处理了一下）
.nav-slider {
    margin-left: 20%;
}



好啦到这里问题都解决啦！