由于项目需要,要以甘特图的形式来体现任务的完成进度,所以我从网上下载了了jQuery.Gantt的源码,并在此基础上做了部分修改以满足项目需求。
下面是最终实现效果:
一:
首先我们拿到源码以后,把CSS、img、JS等资源放入我们自己的项目中,然后在具体的页面引用需要的资源:
css样式引用:
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/prettify.min.css" />
< js脚本引用:
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fn.gantt.js" charset ="GB2312">></script>
<script src="js/prettify.min.js"></script>
为了防止中文乱码,引用js文件的时候上charset特性并设置为GB2312。
最后在需要展现甘特图的地方加上以下div:
<div class="gantt"></div>
展示的时候可以给甘特图套上一个div:
<div class="gantt_ot" style="width:800px; margin:100px auto;">
<div class="gantt"></div>
</div>
长宽根据实际情况来定;
下面是具体显示的js:
$(document).ready(function() {
$.ajax({
url : contextPath + "/pro/ganttChart/", //请求后台,并返回甘特图需要的json数据
type : "post",
data : "proId=" + proId,
dataType : "JSON",
cache : false, //关闭AJAX缓存
success : function(data) {
//初始化gantt
$(".gant