- 概述
JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。
![](http://images.cnitblog.com/blog/485275/201306/09211338-62b1ea88633e4199906f1c82c870766b.jpg)
- 源码下载
- 前端页面
-
- 资源引用
-
-
- 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");}});
|