jqueryGantt⽢特图简单应⽤  最近公司排产需要做个⽢特图，做了⼀个智能排产；
js和css的引⽤
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fn.gantt.js"></script>
jquery.fn.gantt.js是⽢特图重要的js⽂件，⽹上可以得到，引⽤时记得要先引⽤jq⽂件否则报错
html：
<div class="gantt"></div>
引⽤⽢特图然后js初始化如下
$(".gantt").gantt({
source: [
{
name: "序号⼀",
desc: "这是描述1",
values: [{
from: "/Date(1320192000000)/",
to: "/Date(1320592000000)/",
label: "这是描述1",
customClass: "ganttRed",
dataObj: "data1",
desc: '<b>Task #</b>3<br><b>Data</b>: [2018-06-06 15:30:00 - 2018-06-28 16:00:00]',
}]
},{
name: "序号⼀",
desc: "这是描述1",
values: [{
from: "/Date(1322611200000)/",
to: "/Date(1323302400000)/",
label: "这是描述2",
customClass: "ganttBlue",
dataObj: "data1",
desc: '<b>Task #</b>3<br><b>Data</b>: [2018-06-06 15:30:00 - 2018-06-28 16:00:00]',
},
{from: "/Date(1323802400000)/",
to: "/Date(1325685200000)/",
label: "",
customClass: "ganttOrange"
},
]
}
],
navigate: 'scroll', //buttons  scroll
scale: "days", // months  weeks days  hours
months: ["⼀⽉", "⼆⽉", "三⽉", "四⽉", "五⽉", "六⽉", "七⽉", "⼋⽉", "九⽉", "⼗⽉", "⼗⼀⽉", "⼗⼆⽉"],
dow: ["S", "M", "T", "W", "T", "F", "S"],
maxScale: "months",
minScale: "days",
itemsPerPage: 10,
onItemClick: function(data) {
alert("这⾥是数据区域点击")
},
onAddClick:function() {
alert("这⾥是⽆数据区域点击")
},
onRender: function() {
}
});
重点数据结构介绍
source：是获取的后台数据结构如上，name是左边的序列号也可以是其他，desc是名称等等效果如下
values: [{
from: "/Date(1320192000000)/",
to: "/Date(1320592000000)/",
label: "这是描述1",
customClass: "ganttRed",
dataObj: "data1",
desc: '<b>Task #</b>3<br><b>Data</b>: [2018-06-06 15:30:00 - 2018-06-28 16:00:00]',      }]
valuse是右边的数据条
form是开始时间，to是结束时间，form和to⾥⾯Date传⼊的值是时间戳，
label是数据条上显⽰的⽂本，
customClass是颜⾊，
desc：这⾥的desc是⿏标移⼊是显⽰的模块数据可以是html代码块，
dataObj：是点击数据时点击事件获取的数据；
navigate：是否横向滚动条 可选buttons 或scroll；
scale：可选months  weeks days  hours，年⽉⽇时显⽰数据；
months：⾥⾯传⼊12⽉可以是英⽂⾃由定义；
dow：⾥⾯传⼊星期可以是英⽂⾃由定义；
itemsPerPage：是显⽰数据的⾏数多余的会⾃动分页；
onItemClick：这⾥是数据区域点击事件，data拿到的是dataObj；
jquery滚动条滚动到底部
onAddClick：这⾥是⽆数据区域点击事件；
onRender：加载时执⾏的事件；
另外如果⼀⾏有两条数据的话数据结构如下
values: [{
from: "/Date(1322611200000)/",
to: "/Date(1323302400000)/",
label: "这是描述2",
customClass: "ganttBlue",
dataObj: "data1",
desc: '<b>Task #</b>3<br><b>Data</b>: [2018-06-06 15:30:00 - 2018-06-28 16:00:00]',        },
{from: "/Date(1323802400000)/",
to: "/Date(1325685200000)/",
label: "",
customClass: "ganttOrange"
},
]
style：
.
gantt{width:100%;border:1px solid #ddd;position:relative;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-b

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。