JQuery.Gantt 简单例子

最新推荐文章于 2024-10-11 07:44:56 发布

技术无国界

最新推荐文章于 2024-10-11 07:44:56 发布

阅读量5.2k

点赞数 2

分类专栏： JQuery-Gan javascript 文章标签： JQuery-Gan

本文链接：https://blog.csdn.net/l3922768721/article/details/79933327

版权

javascript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JQuery-Gan

1 篇文章 0 订阅

订阅专栏

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

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