JQuery.Gantt 简单例子

效果图:不符合要求,请飘过。网上找了好多例子,都各种粘贴复制的,根本没实现功能,所以自己只好又花了点时间,整理了个项目中需要的例子。

456868?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbDM5MjI3Njg3MjE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)![这里写图片描述](https://img-blog.csdn.net/20180413185

调试机子目录
这里写图片描述

1、添加js和css

<link rel="stylesheet" href="css/gantt.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.fn.gantt.js"></script>

2、html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/gantt.css" />
        <link rel="stylesheet" href="css/style.css" />
        <script src="js/jquery-1.7.min.js"></script>
        <script src="js/jquery.fn.gantt.js"></script>
    </head>
    <body>
        <div class="main">
            <div class="work_bottom">
                <div class="title">
                    <h3 style="font-size:16px;margin-bottom: 10px;margin-top: 10px;">工作计划甘特图</h3>
                </div>
                <div class="contain">
                    <div class="gantt">
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        var source = [{
            name: "北仑厂2号机",
            desc: "AVC",
            values: [{ //一行显示
                id: "t01",
                /*from: "1514851200000",
                to: "1515369600000",*/
                from: daysBetween(new Date('2018-01-01')),
                to: daysBetween(new Date('2018-01-06')),
                desc:'2018-01-01到2018-01-06',
                label: '2018-01-01到2018-01-06', 
                customClass: "ganttRed",
            },
            {
                id: "t01",
                /*from: "1514851200000",
                to: "1515369600000",*/
                from: daysBetween(new Date('2018-01-07')),
                to: daysBetween(new Date('2018-01-19')),
                desc:'2018-01-01到2018-01-06',
                label: '2018-01-01到2018-01-06', 
                customClass: "ganttRed",
            }]
        },{
            name: "北仑厂4号机",
            desc: "AVC",
            values: [{
                from: daysBetween(new Date('2018-01-06')),
                to: daysBetween(new Date('2018-02-06')),
                desc:'2018-01-01到2018-01-06' ,
                label: '2018-01-01到2018-01-06', 
                customClass: "ganttBlue",
                dep: "t02",
            }]
        },{
            name: "北仑厂5号机",
            desc: "AVC",
            values: [{
                from: daysBetween(new Date('2018-02-02')),
                to: daysBetween(new Date('2018-04-06')),
                desc:'2018-01-01到2018-01-06' ,
                label: '2018-01-01到2018-01-06', 
                customClass: "ganttGreen"
            }]
        },{
            name: "北仑厂6号机",
            desc: "AVC",
            values: [{
                from: daysBetween(new Date('2018-03-02')),
                to: daysBetween(new Date('2018-04-21')),
                desc:'2018-01-01到2018-01-06' ,
                label: '2018-01-01到2018-01-06', 
                customClass: "ganttBlue"
            }]
        },{
            name: "北仑厂2号机",
            desc: "AVC",
            values: [{
                id: "t01",
                from: daysBetween(new Date('2018-06-02')),
                to: daysBetween(new Date('2018-12-21')),
                desc:'2018-01-01到2018-01-06' ,
                label: '2018-01-01到2018-01-06',  
                customClass: "ganttGreen",
                dep: "t02"
            }]
        },{
            name: "北仑厂8号机",
            desc: "AVC",
            values: [{
                from: daysBetween(new Date('2018-07-02')),
                to: daysBetween(new Date('2018-8-21')),
                desc:'2018-01-01到2018-01-06' ,
                label: '2018-01-01到2018-01-06', 
                customClass: "ganttOrange"
            }]
        },{
            name: "北仑厂9号机",
            desc: "AVC",
            values: [{
                from: daysBetween(new Date('2018-09-02')),
                to: daysBetween(new Date('2018-11-21')),
                desc:'2018-01-01到2018-01-06' ,
                label: '2018-01-01到2018-01-06', 
                customClass: "ganttBlue"
            }]
        },{
            name: "北仑厂9号机",
            desc: "AVC",
            values: [{
                from: daysBetween(new Date('2018-09-02')),
                to: daysBetween(new Date('2018-11-21')),
                desc:'2018-01-01到2018-01-06' ,
                label: '2018-01-01到2018-01-06', 
                customClass: "ganttBlue"
            }]
        },{

            name: "北仑厂9号机",
            desc: "AVC",
            values: [{
                from: daysBetween(new Date('2018-09-02')),
                to: daysBetween(new Date('2018-11-21')),
                desc:'2018-01-01到2018-01-06' ,
                label: '2018-01-01到2018-01-06', 
                customClass: "ganttBlue"
            }]
        }]


    /**
     * 初始化甘特图
     */
    $(function() {
        "use strict";
        $(".gantt").gantt({
            source:source ,
            navigate: "scroll",
            scale: "days",
            /*startPos: new Date(),*/
            maxScale: "months",
            minScale: "days",
            itemsPerPage: 7,
            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");
                    addTag();
                }
            }
        });
    });
        /**
         *  左侧加两个标签
         */
        function addTag(){
            var  spacer = $(".spacer");
            var html = "";
            html += '<span>机组名称</span>'+
                    '<span>计划分类</span>';
            spacer.html(html);   
            $(".nav-zoomIn").hide();//影藏放大
            $(".nav-zoomOut").hide();//影藏缩写
            /**
             * 解决样式错乱
             */
            $(".row .date:last-child").css("float","right");
            $(".row .date:last-child").css("margin-top","-24px");
            $(".row .day:last-child").css("float","right");
            $(".row .day:last-child").css("margin-top","-24px");
            /*$(".year:first").hide(); //默认影藏
            $(".month:first").hide();
            $(".row .date:nth-child(1)").hide();
            $(".row .date:nth-child(2)").hide();
            $(".row .day:nth-child(1)").hide();
            $(".row .day:nth-child(2)").hide();*/
            /*$(".year:first").remove();
            $(".month:first").remove();
            $(".row .date:nth-child(1)").remove();
            $(".row .date:nth-child(2)").remove();
            $(".row .day:nth-child(1)").remove();*/
        }
        /**
         * 时间转换成数字
         */
        var date = new Date('2018-02-11');
        function daysBetween(sDate1){
            var time1 = Date.parse(sDate1);
            return time1;
        };
    </script>
</html>

3、注意事项

a、网上的例子 一般会出现日期到40或者50的情况,设置

 scale: "days",minScale: "days",

b、样式错乱,边框问题

 box-sizing: border-box;/*从边框开始计算*/
 -webkit-box-sizing: border-box;/*兼容低版本浏览器(主流移动端浏览器兼容)*/

c、日期最后一天样式换到下一行,目前只能在代码中控制样式,不影响使用

 /**
* 解决样式错乱
 */
            $(".row .date:last-child").css("float","right");
            $(".row .date:last-child").css("margin-top","-24px");
            $(".row .day:last-child").css("float","right");
            $(".row .day:last-child").css("margin-top","-24px");

d、同一左侧计划,可以在一行显示,数组中在添加成员

var source = [{
            name: "北仑厂2号机",
            desc: "AVC",
            values: [{ //一行显示
                id: "t01",
                /*from: "1514851200000",
                to: "1515369600000",*/
                from: daysBetween(new Date('2018-01-01')),
                to: daysBetween(new Date('2018-01-06')),
                desc:'2018-01-01到2018-01-06',
                label: '2018-01-01到2018-01-06', 
                customClass: "ganttRed",
            },
            {
                id: "t01",
                /*from: "1514851200000",
                to: "1515369600000",*/
                from: daysBetween(new Date('2018-01-07')),
                to: daysBetween(new Date('2018-01-19')),
                desc:'2018-01-01到2018-01-06',
                label: '2018-01-01到2018-01-06', 
                customClass: "ganttRed",
            }]
        }

4、源码下载

https://download.csdn.net/download/l3922768721/10347339

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页