JQuery.Gantt（⽢特图）开发指南
概述
JQuery.Gantt是⼀个开源的基于JQuery库的⽤于实现⽢特图效果的可扩展功能的JS组件库。
源码下载
前端页⾯
资源引⽤
⾸先我们需要将下载到的源码中的CSS、IMG、JS等资源放⼊我们⾃⼰的项⽬中，然后在我们⾃⼰的页⾯中引⽤需要的资源⽂件。
CSS样式⽂件
<link rel="stylesheet"href="css/style.css"/>
JS脚本⽂件
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.fn.gantt.js"charset="GB2312"></script>
<script src="kie.js"></script>
注：如果需要⽢特图中显⽰中⽂，则需要在js⽂件引⽤中加上charset特性并设置为GB2312，否则中⽂内容将显⽰为乱码。
页⾯布局
在需要显⽰⽢特图的地⽅加⼊以下这个div。
<div class="gantt"></div>
组件配置
Gantt 配置
$(".selector").gantt({
source:"ajax/data.json",
scale:"weeks",
minScale:"weeks",
maxScale:"months",
onItemClick:function(data){
alert("Item clicked - show some details");},
onAddClick:function(dt, rowId){
alert("Empty space clicked - add an item!");},
onRender:function(){
console.log("chart rendered");}});
参数默认值接收类型
source null Array, String (url) itemsPerPage7Number
Array
months["January", "February", "March", "April", "May", "June", "July",
全国计算机二级c语言成绩查询"August", "September", "October", "November", "December"]
dow["S", "M", "T", "W", "T", "F", "S"]Array navigate"buttons"String ("buttons","scroll") scale"days"String maxScale"months"String minScale"hours"String waitText""String
onItemClick:function (data) { return; }有数据范围内的点击事件onAddClick function (dt, rowId) { return; }⽆数据范围内的点击事件
参数默认值接收类型
onRender function () { return; }渲染事件
useCookie false如果需要使⽤cookie则需
要引⽤JS脚本⽂件：
scrollToToday true Boolean
Source 配置
source:[{
name:"Example",
desc:"Lorem ipsum dolor sit amet.",
values:[...]}]
开源代码安全检测平台参数默认值接收类型解释
name null String每⼀⾏最左侧的⼀列以粗体显⽰
desc null String每⼀⾏左侧第⼆列
values null Array⽢特图⽇期范围项
Value 配置
values:[{
to:"/Date(1328832000000)/",from:"/Date(1333411200000)/",
discourage后面跟什么
desc:"Something",
label:"Example Value",
customClass:"ganttRed",
dataObj: foo.bar[i]}]jquery下载文件请求
参数接收类型解释
to String (Date)结束时间，以毫秒为换算单位
from String (Date)开始时间，以毫秒为换算单位
desc String⿏标悬停显⽰⽂本
label String⽢特项显⽰⽂本
customClass String⽢特项的⾃定义class
dataObj All⼀个直接应⽤于⽢特项的数据对象
注：其中from和to的时间为毫秒数，例如：/Date(1320192000000)/，计算⽅式为时间变量减去时间初始值（1970-1-1）的差值换算为毫秒 .NET平台实现时间转换
public class GanttManager
{
public static readonly DateTime StartTime =TimeZone.CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1)).Date;
public static List<GanttItem> DataToGanttList()
{
List<GanttItem> ls =new List<GanttItem>();
GanttItem item =new GanttItem();
item.name ="a";
电影小程序项目item.desc ="b";
item.values.id ="1";
item.values.label ="c";
item.values.from = ToMillisecondDate(new DateTime(2011, 11, 2));
= ToMillisecondDate(new DateTime(2011, 11, 3));
ls.Add(item);
ls.Add(item);
return ls;
}
}
public static string ToMillisecondDate(DateTime dt)
{
return"/Date("+ ((dt.Date - StartTime.Date).TotalSeconds * 1000).ToString() +")/";
}
编程需要掌握的英语单词}
代码说明
⽤于cookie管理，如果需要在⽢特图中使⽤cookie则需要在页⾯中引⽤该js⽂件，否则不需要引⽤。
jquery.fn.gantt.js
JQuery.Gantt组件的核⼼脚本⽂件，所有的⽢特图功能代码都在这个⽂件中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。