JQuery.Gantt（甘特图）开发指南 , 附下载资源

下载地址：https://github.com/ybx13579/jQuery.Gantt

概述

 JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。

隐藏按钮组
PS：如不需要按钮组，可用css隐藏 ↓ ↓ ↓ ↓

.fn-gantt .bottom {
    display: none;
}

这里写图片描述

未隐藏按钮组

这里写图片描述

资源引用
首先我们需要将下载到的源码中的CSS、IMG、JS等资源放入我们自己的项目中，然后在我们自己的页面中引用需要的资源文件。

1、CSS样式文件
<link rel="stylesheet" href="css/style.css" />

2、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，否则中文内容将显示为乱码。

3、在需要显示甘特图的地方加入以下这个div。

<div class="gantt"></div>

4、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)
`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; }`	无数据范围内的点击事件
`onRender`	`function () { return; }`	渲染事件
`useCookie`	`false`	如果需要使用cookie则需要引用JS脚本文件： `jquery.cookie.js`
`scrollToToday`	`true`	Boolean

5、Source 配置


source:[{
    name:"Example",
    desc:"Lorem ipsum dolor sit amet.",
    values:[...]
}]

参数	默认值	接收类型	解释
`name`	null	String	每一行最左侧的一列以粗体显示
`desc`	null	String	每一行左侧第二列
`values`	null	Array	甘特图日期范围项

6、Value 配置

values: [{
    to: "/Date(1328832000000)/", from: "/Date(1333411200000)/",
    desc: "Something",
    label: "Example Value",
    customClass: "ganttRed",
    dataObj: foo.bar[i]
}]

参数	接收类型	解释
`to`	String (Date)	结束时间，以毫秒为换算单位
`from`	String (Date)	开始时间，以毫秒为换算单位
`desc`	String	鼠标悬停显示文本
`label`	String	甘特项显示文本
`customClass`	String	甘特项的自定义class
`dataObj`	All	一个直接应用于甘特项的数据对象

注：其中from和to的时间为毫秒数，例如：/Date(1320192000000)/，计算方式为时间变量减去时间初始值（1970-1-1）的差值换算为毫秒

JQuery.Gantt（甘特图） 开发指南 , 附下载资源

概述

猜你喜欢

JQuery.Gantt（甘特图）开发指南 , 附下载资源