<!doctype html>
<html lang="en">
<head>
<title>jQuery.Gantt</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
<link rel="stylesheet" href="css/style.css" />
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
padding: 0 0 50px 0;
}
.gantt_ot {
width: 98%;
margin: 10px auto;
}
.fn-gantt .leftPanel .row {
border: none;
}
.fn-gantt .leftPanel .spacer {
border-bottom: 1px solid #ddd;
}
.fn-gantt .leftPanel .name {
width: 90px;
}
.fn-gantt .leftPanel .desc {
width: calc(100% - 90px);
}
.fn-gantt .leftPanel .name .fn-label,
.fn-gantt .leftPanel .desc .fn-label {
width: 100%;
margin: 0;
text-align: center;
padding: 0 5px;
box-sizing: border-box;
}
.fn-gantt .leftPanel .fn-wide {
border-bottom: 1px solid #ddd;
width: 100%;
display: none;
}
.fn-gantt .leftPanel .desc,
.fn-gantt .leftPanel .name {
height: 48px;
line-height: 48px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="gantt_ot">
<div class="gantt"></div>
</div>
</body>
</html>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.fn.gantt.js"></script>
<script>
$(function() {
"use strict";
//初始化gantt
$(".gantt").gantt({
source: [{
name: "王强",
desc: "公司网站前端+后台",
values: [{
from: "/Date(1320192000000)/",
to: "/Date(1320592000000)/",
label: "",
desc: "计划：2018-02-10~2018-02-20",
customClass: "ganttBlue"
}]
}, {
name: "",
desc: "",
values: [{
from: "/Date(1320192000000)/",
to: "/Date(1320592000000)/",
label: "",
desc: "实际：2018-02-10~2018-02-20",
customClass: "ganttRed"
}]
}, {
name: "李明",
desc: "公司网站前端+后台公司网站前端+后台公司网站前端+后台公司网站前端+后台公司网站前端+后台",
values: [{
from: "/Date(1322611200000)/",
to: "/Date(1323302400000)/",
desc: "做页面<br>计划开始日期：2018-02-10<br/>计划结束日期：2018-02-10",
label: "",
customClass: "ganttBlue"
}]
}, {
name: "",
desc: "",
values: [{
from: "/Date(1323802400000)/",
to: "/Date(1325685200000)/",
desc: "做页面<br>实际开始日期：2018-02-10<br/>实际结束日期：2018-02-10",
label: "",
customClass: "ganttRed"
}]
}, {
name: "张三",
desc: "描述",
values: [{
from: "/Date(1325685200000)/",
to: "/Date(1325695200000)/",
desc: "<br>开始日期：2018-02-10<br/>计划结束日期：2018-02-10",
label: "",
customClass: "ganttBlue"
}]
}, {
name: "",
desc: "",
values: [{
from: "/Date(1326785200000)/",
to: "/Date(1325785200000)/",
desc: "做页面<br>实际开始日期：2018-02-10<br/>实际结束日期：2018-02-10",
label: "",
customClass: "ganttRed"
}]
}, {
name: "李四",
desc: "完成原型图和设计",
values: [{
from: "/Date(1328785200000)/",
to: "/Date(1328905200000)/",
label: "",
customClass: "ganttBlue"
}]
}, {
name: "",
desc: "",
values: [{
from: "/Date(1330011200000)/",
to: "/Date(1336611200000)/",
label: "",
customClass: "ganttRed"
}]
}, {
name: "王五",
desc: "调接口、联调",
values: [{
from: "/Date(1322611200000)/",
to: "/Date(1323302400000)/",
label: "",
customClass: "ganttBlue"
},
{
from: "/Date(1323802400000)/",
to: "/Date(1325685200000)/",
label: "",
customClass: "ganttBlue"
},
{
from: "/Date(1328785200000)/",
to: "/Date(1328905200000)/",
label: "",
customClass: "ganttBlue"
}
]
},
{
name: "",
desc: "",
values: [{
from: "/Date(1322611200000)/",
to: "/Date(1323302400000)/",
label: "",
customClass: "ganttRed"
},
{
from: "/Date(1323802400000)/",
to: "/Date(1325685200000)/",
label: "",
customClass: "ganttRed"
},
{
from: "/Date(1328785200000)/",
to: "/Date(1328905200000)/",
label: "",
customClass: "ganttRed"
}
]
}
],
navigate: 'scroll', //buttons scroll
scale: "weeks", // months weeks days hours
maxScale: "months",
minScale: "days",
itemsPerPage: 10,
waitText: "请稍后…",
onItemClick: function(data) {
//alert(data);
},
onAddClick: function(dt, rowId) {
//alert("Empty space clicked - add an item!");
},
onRender: function() {
if(window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
//弹窗功能
// $(".gantt").popover({
// selector: ".bar",
// title: "I'm a popover",
// content: "And I'm the content of said popover.",
// trigger: "hover",
// placement: "auto right"
// });
//prettyPrint();
});
</script>
jQuery-gantt案例，下载即可用
需积分: 21 182 浏览量
2018-04-28
09:31:49
上传
评论 1
收藏 47KB RAR 举报
gantt.rar （9个子文件） 
gantt css img 
grid.png 122B slider_handle.png 1KB close.png 1KB loader_bg.png 160B icon_sprite.png 683B
style.css 9KB
index.html 6KB js jquery.fn.gantt.js 79KB jquery-2.1.4.min.js 82KB资源评论
