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用法的更多相关文章

  1. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  2. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  3. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

  4. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  5. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

  6. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  7. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  8. chattr用法

    [root@localhost tmp]# umask 0022 一.chattr用法 1.创建空文件attrtest,然后删除,提示无法删除,因为有隐藏文件 [root@localhost tmp] ...

  9. 萌新笔记——vim命令“=”、“d”、“y”的用法（结合光标移动命令，一些场合会非常方便）

    vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...

随机推荐

  1. PHP是弱类型语言，自动转换，强制转换

    强制转换: (int) - 转换成整型 (bool) - 转换.成布尔型 (float) - 转换成浮点型 (string) - 转换成字符串 (array) - 转换成数组 (object) - 转 ...

  2. Vim升华之树形目录插件NERDTree安装图解

    来源:CSDN 作者:mybelief321 无意中看到实验室的朋友使用的vim竟然能在左边显示树形目录,感觉很方便,这样子文件夹有什么文件一目了然.他说是一个插件叫NERDTree,安装执行后的效果 ...

  3. 关于sql 的列转行

    select * from TbaleOne unpivot(qty ])) as up go select * from TableTwo unpivot(grate for subject in ...

  4. 遗传算法在JobShop中的应用研究（part4:变异）

    下面,我们以车间调度为例来谈谈遗传算法中的另一个重要操作变异.变异操作通常发生在交叉操作之后,它的操作对象是交叉得到的新染色体.在本文中我们通过随机交换染色体的两个位置上的值来得到变异后的染色体,变异 ...

  5. VB默认属性、动态数组、Range对象的默认属性的一点不成熟的想法

    1.默认属性 VB6.0有默认属性的特性.当没有给对象指定具体的属性时,"默认属性"是VB6.0将使用的属性.在某些情形下,省略常用属性名,使代码更为精简. 因为CommandBu ...

  6. 并查集 poj2236

    网址:http://poj.org/problem?id=2236 题意:有n台坏的电脑,如果每两台电脑的距离不能超过d,那么这两台电脑有联系,用字符串O 表示标记第x台电脑维修了,用S判断从X到y是 ...

  7. Servlet开发详解

    一.Servlet简介 Servlet是sun公司提供的一门用于动态web资源的技术 sun公司在其API中提供了一个Servlet接口,用户若想开发一个动态web资源,需要完成两个步骤: 编写一个J ...

  8. 使用Gson转换json数据为Java对象的一个例子

    记录工作中碰到的一个内容. 原料是微信平台的一个接口json数据. { "errcode" : 0, "errmsg" : "ok", &q ...

  9. SVN版本号打包脚本工具

    做网页游戏开发的时候,经常会触及到对文件版本号的管理.最近由于做新项目的原因,把原来手写版本号的方法改进了一下,借由svn的版本号生成及用java写了个xml解析输出文件,把手动的东西都变成全自动. ...

  10. asp TreeView控件的使用

    相对于之前发过一个TreeView控件的使用方法 本次利用js操作,页面无刷新,性能提高 Css编码可能时我的模板页样式被继承下来,导致页面变乱,不需要的可以去掉 前台 <style> . ...