jquery gantt 的使用

1、引入css与js文件

　　<link rel="stylesheet" href="css/style.css" />　　

　　<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>

 

2、html

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

 

3、数据对象

var demoSource = [
{
　　name: "aaa",
　　desc: "aaa",
　　values: [
　　{from: '2021-01-19',to: '2021-01-19',desc:"a1 2021-01-19",label:"a1",dataObj:{"id":"001","code":"a01"}},
　　{from: '2021-02-19',to: '2021-02-19',desc:"a2 2021-02-19",label:"a2",dataObj:{"id":"002","code":"a02"}},
　　{from: '2021-04-19',to: '2021-04-19',desc:"a3 2021-04-19",label:"a3",dataObj:{"id":"003","code":"a03"}}
　　]
}]

其中name指的是左侧第一列的内容，desc指的是左侧第二列的内容。

values指的是右侧显示的内容：

　　其中from表示开始时间，to表示结束时间，desc表示鼠标放在数据条上所显示的内容。label甘特图项目的标题文字。

　　dataObj表示其他自定义的内容，这可以是任意的数据类型， 例如，我这里是一个对象，可以使用这个dataObj做一个自定义的点击事件。

4、甘特图基本配置

$(".gantt").gantt({
     source: data,
     navigate: 'scroll',//// 底部使用拖拽的刻度尺还是按钮：scroll和buttons
     scale: "weeks",// 这里是设置默认比例。这里总共有四个参数：months  weeks days  hours.
     maxScale: "months", // 这里是设置最大比例。这里总共有四个参数：months  weeks days  hours.
     minScale: "days", // 这里是设置最小比例。这里总共有四个参数：months  weeks days  hours.
     itemsPerPage: 10, //设置甘特图每页显示多少条
     onItemClick: function (data) {//有数据范围内的点击事件
         console.log(data);   // 这里输出的就是所点击数据的dataObj   001  a01
     },
     onAddClick: function (dt, rowId) {//无数据范围内的点击事件
     },
 });
　其中，点击事件onItemClick，其参数data，就是上述数据对象中的dataObj