jqueryGannt用法
生活随笔
收集整理的這篇文章主要介紹了
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>?目錄結構
?
轉載于:https://www.cnblogs.com/wangcc/p/6234739.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的jqueryGannt用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++使用Windows API Cre
- 下一篇： CentOS7 虚拟机搭建、初始设置、简