jqueryGannt用法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jqueryGannt用法相关的知识，希望对你有一定的参考价值。

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用法的主要内容，如果未能解决你的问题，请参考以下文章

SQL Select 语句的用法

jquery中的$的特殊用法

Xcode中的变量模板(variable template)的用法

创建片段而不从 java 代码实例化它

MyBatis动态SQL标签用法

微信小程序第七天WXML语法之模板用法