jqueryGannt用法

时间：2016-12-29 22:50:31 阅读：536 评论：0 收藏：0 [点我收藏+]

标签：nav 甘特图 one test nbsp 用法 back name github

jqueryGannt主要用于甘特图的展示，直接上步骤

1、下载

jquery.min.js

js/jquery.fn.gantt.js 的js ，可以自己去github上搜官方的。

其他的要上传对应的style和img，都可以在官网上下载

2、html

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery.Gantt - Test Suite 01</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=IE8">
<link href="css/style.css" type="text/css" rel="stylesheet">
<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;
}

h1 {
    margin: 40px 0 20px 0;
}

h2 {
    font-size: 1.5em;
    padding-bottom: 3px;
    border-bottom: 1px solid #DDD;
    margin-top: 50px;
    margin-bottom: 25px;
}

table th:first-child {
    width: 150px;
}
</style>
</head>
<body>



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


    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.fn.gantt.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script>
        function addHour(moment) {
            return moment.add(12, "hours");
        }
        function addHour1(moment) {
            return moment.add(6, "hours");
        }
        function loadgantt() {
            var today = moment();
            var andTwoHours = addHour1(moment());
            var t1 = "/Date(" + today.valueOf() + ")/";
            var t2 = "/Date(" + andTwoHours.valueOf() + ")/";
            var t3 = "/Date(" + addHour1(andTwoHours).valueOf() + ")/";
            var t4 = "/Date(" + addHour1(addHour1(andTwoHours)).valueOf() + ")/";
            $(".gantt").gantt({
                source : [ {
                    name : "Testing",
                    desc : " ",
                    values : [ {
                        from : t1,
                        to : t2,
                        label : "Test",
                        customClass : "ganttRed"
                    }, {
                        from : t2,
                        to : t3,
                        label : "Test1",
                        customClass : "ganttGreen"
                    }, {
                        from : t3,
                        to : t4,
                        label : "Test2",
                        customClass : "ganttOrange"
                    } ]
                }
                    ,
                    {
                        name : "Testing1",
                        desc : " ",
                        values : [ {
                            from : t1,
                            to : t2,
                            label : "Test",
                            customClass : "ganttRed"
                        }, {
                            from : t2,
                            to : t3,
                            label : "Test1",
                            customClass : "ganttGreen"
                        }, {
                            from : t3,
                            to : t4,
                            label : "Test2",
                            customClass : "ganttOrange"
                        } ]
                    }
    
                ],
                scale : "hours",
                minScale : "hours",
                navigate : "scroll"
            });
    
        }
        $(function() {
            "use strict";
            var today = moment();
            var andTwoHours = addHour(moment());
    
            var t1 = "/Date(" + today.valueOf() + ")/";
            var t2 = "/Date(" + andTwoHours.valueOf() + ")/";
            var t3 = "/Date(" + addHour(andTwoHours).valueOf() + ")/";
            var t4 = "/Date(" + addHour(addHour(andTwoHours)).valueOf() + ")/";
            $(".gantt").gantt({
                source : [ {
                    name : "Testing",
                    desc : " ",
                    values : [ {
                        from : t1,
                        to : t2,
                        label : "Test",
                        customClass : "ganttRed"
                    }, {
                        from : t2,
                        to : t3,
                        label : "Test1",
                        customClass : "ganttGreen"
                    }, {
                        from : t3,
                        to : t4,
                        label : "Test2",
                        customClass : "ganttOrange"
                    } ]
                }
                    ,
                    {
                        name : "Testing1",
                        desc : " ",
                        values : [ {
                            from : t1,
                            to : t2,
                            label : "Test",
                            customClass : "ganttRed"
                        }, {
                            from : t2,
                            to : t3,
                            label : "Test1",
                            customClass : "ganttGreen"
                        }, {
                            from : t3,
                            to : t4,
                            label : "Test2",
                            customClass : "ganttOrange"
                        } ]
                    }
    
                ],
                scale : "hours",
                minScale : "hours",
                navigate : "scroll"
            });
    
        });
    </script>
    <input type="button" onclick="loadgantt()" />
</body>
</html>

目录结构

技术分享

jqueryGannt用法

标签：nav 甘特图 one test nbsp 用法 back name github

原文地址：http://www.cnblogs.com/wangcc/p/6234739.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行