Jquery 甘特图 插件 jQuery Gantt

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

http://taitems.github.io/jQuery.Gantt/

参数	默认值	类型	说明
source	null	Array, String (url)	数据源：json数组或者返回json的url地址
itemsPerPage	7	Number	每页显示项目数
months	["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]	Array	月份对应的显示字符
dow	["S", "M", "T", "W", "T", "F", "S"]	Array	周日到周一的显示字符
navigate	"buttons"	String ("buttons","scroll")	导航类型：按钮和滚动条
scale	"days"	String	显示单元
maxScale	"months"	String	视图缩放最大单元
minScale	"hours"	String	视图缩放最小单元
waitText	"Please Wait..."	String	加载时的提示文字
onItemClick:	function (data) { return; }		点击时执行的操作，参数是被点击项目相关联的数据对象
onAddClick	function (dt, rowId) { return; }		在空白格子点击时执行的函数 第一个参数是点击点对应时间的毫秒数，第二个参数对象的id
onRender	function () { return; }		甘特图渲染完毕后执行的操作
useCookie	false		声明是是否使用cookie记录图表的状态（缩放单元、滚动条位置） 需要使用jquery.cookie.js才能使用该选项
scrollToToday	true	Boolean	是否滚动到当天

Source Configuration 数据源配置格式

source: [{ name: "标题", desc: "描述.", values: [ ... ]}]

参数	默认值	类型	说明
name	null	String	甘特图左侧显示的每行所对应的标题——体文字部分
desc	null	String	左侧说明的描述部分
values	null	Array	甘特图单元所对应的时间段等信息，在右侧的单元格显示

Value Configuration 数据源的json数值对

values: [{ to: "/Date(1328832000000)/", from: "/Date(1333411200000)/", desc: "鼠标悬停时的描述文字", label: "甘特图项目标题", customClass: "ganttRed", dataObj: foo.bar[i]}]

参数	类型	说明
to	String (Date)	结束时间（毫秒数，php返回时可以在时间戳后添加3个0）
from	String (Date)	开始时间
desc	String	鼠标悬停到项目上个的提示文字Text that appears on hover, I think?
label	String	甘特图项目的标题文字
customClass	String	添加到甘特图项目的自定义类，可以用来标记甘特图项目的颜色
dataObj	All	点击时应用到甘特图项目的data对象

$(function() {   "use strict";   $(".gantt").gantt({    source: [{     name: "Sprint 0",     desc: "Analysis",     values: [{      from: "/Date(1320192000000)/",      to: "/Date(1322401600000)/",      label: "Requirement Gathering",      customClass: "ganttRed"     }]    },{     name: " ",     desc: "Scoping",     values: [{      from: "/Date(1322611200000)/",      to: "/Date(1323302400000)/",      label: "Scoping",      customClass: "ganttRed"     }]    },{     name: "Sprint 1",     desc: "Development",     values: [{      from: "/Date(1323802400000)/",      to: "/Date(1325685200000)/",      label: "Development",      customClass: "ganttGreen"     }]    },{     name: " ",     desc: "Showcasing",     values: [{      from: "/Date(1325685200000)/",      to: "/Date(1325695200000)/",      label: "Showcasing",      customClass: "ganttBlue"     }]    },{     name: "Sprint 2",     desc: "Development",     values: [{      from: "/Date(1326785200000)/",      to: "/Date(1325785200000)/",      label: "Development",      customClass: "ganttGreen"     }]    },{     name: " ",     desc: "Showcasing",     values: [{      from: "/Date(1328785200000)/",      to: "/Date(1328905200000)/",      label: "Showcasing",      customClass: "ganttBlue"     }]    },{     name: "Release Stage",     desc: "Training",     values: [{      from: "/Date(1330011200000)/",      to: "/Date(1336611200000)/",      label: "Training",      customClass: "ganttOrange"     }]    },{     name: " ",     desc: "Deployment",     values: [{      from: "/Date(1336611200000)/",      to: "/Date(1338711200000)/",      label: "Deployment",      customClass: "ganttOrange"     }]    },{     name: " ",     desc: "Warranty Period",     values: [{      from: "/Date(1336611200000)/",      to: "/Date(1349711200000)/",      label: "Warranty Period",      customClass: "ganttOrange"     }]    }],    navigate: "scroll",    maxScale: "hours",    itemsPerPage: 10,    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");     }    }   });   $(".gantt").popover({    selector: ".bar",    title: "I'm a popover",    content: "And I'm the content of said popover.",    trigger: "hover"   });   prettyPrint();  });

           

给我老师的人工智能教程打call！http://blog.youkuaiyun.com/jiangjunshow