- 概述
JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的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="js/jquery.cookie.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 配置
source:[{
name:"Example",
desc:"Lorem ipsum dolor sit amet.",
values:[...]}]
|
-
- Value 配置
values:[{
to:"/Date(1328832000000)/",from:"/Date(1333411200000)/",
desc:"Something",
label:"Example Value",
customClass:"ganttRed",
dataObj: foo.bar[i]}]
注：其中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));
item.values.to = 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() + ")/";
}
}
|
- 代码说明
-
- jquery.cookie.js
-
- jquery.fn.gantt.js
JQuery.Gantt组件的核心脚本文件，所有的甘特图功能代码都在这个文件中。
代码结构解析：
|