jquery甘特图插件
程序员文章站
2022-05-22 12:37:15
...
之前有个项目管理的项目 甲方要求必须做成跟他设计图一个样，已有插件不符合他要求，改起来太费劲，无奈自己写了一个，发出来共享一下。
先看效果图：
附使用方法：
参数设置
stime: '2017-01-01',
etime: '2017-02-01',
oldstime: '2017-01-01',
oldetime:'2017-02-01',
cellheight: 27,//每行的高度
//line: 8,//行数
left_box: "gantt_left",//左边容器 样式名
right_box: "gantt_right",//右边容器样式名
color_end: "#5b8d3b",//已完成
color_out: "#bb3b09",//超期
color_ing: "#f58c50",//进行中
color_unstart: "#acabaa",//未开始
showold: 0,//是否显示对比 0 否 1是
show_jd:0,//是否显示审核节点头部引用：
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jQuery.DemonGantt.v1.0.js"></script><!---自定义甘特图插件-------------><!---甘特图-------->
<div class="w100" >
<div class="gantt_box mar_t40 border_01">
<h1>里程碑甘特图<div class="fr confirm_box"><input type="button" value="" class="confirm" />甘特图对比</div></h1>
<div class="gantt_box bg_color_01" id="gantt">
<div class="col-xs-1">
<ul class="gantt_left" id="gantt_left">
</ul>
</div>
<div class="col-xs-11">
<div class="gantt_r_bg"></div>
<ul class="gantt_right" id="gantt_right">
</ul>
</div>
<div class="clearfix"></div>
<div class="gantt_explain">
<span><i class="color_end"></i>已完成</span>
<span><i class="color_out"></i>超期</span>
<span><i class="color_ing"></i>进行中</span>
<span><i class="color_unstart"></i>未开始</span>
</div>
</div>
</div>
<div class="clearfix" style=height:200px;></div>
</div>css 代码
/*******甘特图*/
.de_t_bg{ height:49px; line-height:49px;background:#3c70a7; margin-top:20px; padding:0;}
.de_title{ background:url(../images/de_t_01.jpg) left no-repeat;padding-left:80px;font-size:16px ;color:#ecffff ; font-weight:bold;}
.de_mbx_bg{ height:40px; border-bottom:1px solid #e2e3e8; }
.de_con{ background:#f9f9f9;border: 1px solid #ddd; padding:10px 0;}
.de_con h1{height:27px;line-height:27px;font-size:16px; }
.btn_b_box{ position:absolute; bottom:0px; right:0px;}
.btn_b_box button{ margin-right:10px;}
/***甘特图*****/
.gantt_box{ width:100%;}
.gantt_box h1{ padding-left:40px; height:40px;line-height:40px; font-size:16px;font-weight:bold;}
.confirm_box{ margin-right:15px; line-height:20px;}
.confirm{ width:60px; height:27px; background:url(../images/btn_confirm.png) left bottom no-repeat; border:0;margin-top:7px; }
.confirmed{background-position:top left;}
.bg_color_01{ background:#f1f4fb;}
.gantt_box .col-xs-1{ padding-right:0;}.gantt_box .col-xs-11{ padding-left:0; overflow:hidden;}
效果单独拿出来之后 开始使用
.col-xs-1 { width: 8.333333333333332%;}
.col-xs-11 {width: 91.66666666666666%;}
.gantt_tb{width:98%; margin:0 auto;padding:0;}
.gantt_tb tr{ border-bottom:#bbd4ec;}
.gantt_left{ width:90%; margin-left:10%;}
.gantt_left li,.gantt_right li{ width:100%; height:27px; line-height:27px; border-bottom:1px solid #dfe2e7;}
.gantt_right{ width:100%; position:relative; overflow:hidden;}
.gantt_r_bg{ position:absolute; top:0px; left:0px; height:100%; border-right:1px solid #ec9a7e ;
background: -moz-linear-gradient(left, #f1f4fb 0%, #bcdcfc 100%);
background: -webkit-gradient(linear, left right, left right, color-stop(0%,#f1f4fb), color-stop(100%,#bcdcfc));
background: -webkit-linear-gradient(left, #f1f4fb 0%,#bcdcfc 100%);
background: -o-linear-gradient(left, #f1f4fb 0%,#bcdcfc 100%);
background: -ms-linear-gradient(left, #f1f4fb 0%,#bcdcfc 100%);
background: linear-gradient(to right, #f1f4fb 0%,#bcdcfc 100%);
}
.gantt_right .cell{display: inline-block; height: 100%; /*border-right: 1px solid #ebebeb;*/}
.gantt_right .cellborder{border-left: 1px solid #ebebeb;}
.gantt_right .cell_01{display: inline-block;width:100%; height:15px;margin:5px 0;background:#50b465;}
.gantt_right .cell_01_left{border-radius:15px 0 0 15px;}
.gantt_right .cell_01_right{border-radius:0 15px 15px 0;}
.gantt_explain{ width:300px; float:right;height:30px; line-height:30px;}
.gantt_explain span{ margin:15px 0;padding-left:15px;}
.gantt_explain span i{ width:10px; height:10px;border-radius: 50%;display:inline-block; margin-right:5px;}
/*审核节点*/
.shjd{ background:url(../images/jd.png) center no-repeat;}
/**甘特图结束*/jquery 代码：
<script>
$(function () {
//////////甘特图 效果插件
var stime = "2017-06-01";
var etime = "2018-08-21";
var data = [
{ "id": 1, type: 0, "text": "里程碑", "start_date": "2017-06-01", "end_date": "2017-06-06", "state": 1, "old_start_date": "2017-06-01", "old_end_date": "2017-06-05" },
{ "id": 2, type: 0, "text": "项目确定", "start_date": "2017-06-06", "end_date": "2017-06-11", "state": 2, "old_start_date": "2017-06-06", "old_end_date": "2017-06-11" },
{ "id": 3, type: 0, "text": "概念设计", "start_date": "2017-06-11", "end_date": "2017-06-16", "state": 1, "old_start_date": "2017-06-11", "old_end_date": "2017-06-16" },
{ "id": 4, type: 0, "text": "方案设计", "start_date": "2017-06-16", "end_date": "2017-06-19", "state": 3, "old_start_date": "2017-06-16", "old_end_date": "2017-06-19" },
{ "id": 4.1, type: 1, "text": "审核节点1", "end_date": "2017-06-19"},
{ "id": 5, type: 0, "text": "详细设计", "start_date": "2017-06-19", "end_date": "2017-07-01", "state": 4, "old_start_date": "2017-06-19", "old_end_date": "2017-07-01" },
{ "id": 6, type: 0, "text": "S图签发", "start_date": "2017-07-01", "end_date": "2017-07-14", "state": 4, "old_start_date": "2017-07-01", "old_end_date": "2017-07-14" },
{ "id": 7, type: 0, "text": "试制验证", "start_date": "2017-07-14", "end_date": "2017-07-28", "state": 4, "old_start_date": "2017-07-14", "old_end_date": "2017-07-28" },
{ "id": 7.1, type: 1, "text": "审核节点2", "end_date": "2017-07-29" },
{ "id": 8, type: 0, "text": "A图签发", "start_date": "2017-07-28", "end_date": "2017-08-28", "state": 4, "old_start_date": "2017-07-28", "old_end_date": "2017-08-28" },
{ "id": 9, type: 0, "text": "顺线签发", "start_date": "2017-08-28", "end_date": "2017-09-15", "state": 4, "old_start_date": "2017-08-28", "old_end_date": "2017-09-15" },
{ "id": 10, type: 0, "text": "小批签发", "start_date": "2017-09-15", "end_date": "2017-11-28", "state": 4, "old_start_date": "2017-09-15", "old_end_date": "2017-11-28" },
{ "id": 11, type: 0, "text": "试销", "start_date": "2017-11-28", "end_date": "2018-3-28", "state": 4, "old_start_date": "2017-11-28", "old_end_date": "2018-3-28" },
{ "id": 12, type: 0, "text": "项目总签发", "start_date": "2018-03-28", "end_date": "2018-08-01", "state": 4, "old_start_date": "2018-03-28", "old_end_date": "2018-08-01" },
]
$("#gantt").DemonGantt({
stime: stime,
etime: etime,
show_jd:1,
data: data
});
$(".confirm").click(function () {
if ($(this).hasClass("confirmed")) {
$(this).removeClass("confirmed");
$("#gantt").DemonGantt({
stime: stime,
etime: etime,
showold: 0,
show_jd: 1,
data: data
});
}
else {
$(this).addClass("confirmed");
$("#gantt").DemonGantt({
stime: stime,
etime: etime,
showold: 1,
show_jd: 1,
data: data
});
}
});
//提示层
//$(".cell_01").hover(function () {
// var id = $(this).parent().attr("id");
// layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', "#"+id, {
// tips: [1, '#3595CC'],
// time: 4000
// });
//});
});
</script>下载链接：点击打开链接
上一篇： Java基础类库--国际化程序实现
下一篇： jquery Gantt甘特图简单应用