jquery gantt 的使用
- 2021 年 12 月 25 日
- 筆記
- 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
