对jquery-gantt的应用
由于在公司工作期间需要对甘特图的使用,在网上查询资料的时候找到了这个
所以记录一下自己的使用过程
在主页面引入文件时,发现了生成的时候产生许多的bug
<link rel="stylesheet" type="text/css" href="css/gantt.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jQuery.Gantt-master/js/jquery.fn.gantt.js" charset ="GB2312"></script>
<script type="text/javascript" src="js/jQuery.Gantt-master/js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jQuery.Gantt-master/js/prettify.js"></script>
引入的文件是自己多次调试后,发现可行的方案,若有谁知道更好的请教一下我
自己对gantt.css进行过修改,主要是为了部分显示颜色的原因,
在引入文件最主要是对于数据的操作,在后台拿到的数据返回的是一个list
而且数据格式很乱,所以需要对数据进行一个处理,后来直接后台处理完成返回后台直接使用
在写甘特图期间要多谢以下链接的作者写的文章给予了很多帮助
http://www.yunnanhaoli.com/web/jquery/878.html
在引入之后,在页面上
<div id="gantt" class="gantt"></div>
在js页面上
$(".gantt").gantt({
source: source,
navigate: "scroll",
maxScale: "hours",
months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
dow:["周日","周一","周二","周三","周四","周五","周六"],
itemsPerPage: 10,
onItemClick: function(data) {
alert("Item clicked - show some details");
},
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"
});
prettyPrint();
source则为数据源,具体每一个的意思参照官方文档
也可参照此链接,感觉链接博主写的文章
http://blog.csdn.net/z69183787/article/details/41477033
自己从后台拿取到的对数据的处理方式
var source = new Array();
var tmpData = new Object();
tmpData.values = new Array();
var tmpValues = new Object();
var all = 0;
var fromDate = "";
var toDate = "";
var labelData = "";
var customClassData = "";
$.each(data,function(i,item){
tmpData = {};
tmpData.values = [];
tmpValues = {};
tmpData.name = item.name;
tmpData.progress = Number(item.scale);
fromDate = "/Date("+item.startDate+")/";
if(item.endDate == null || item.endDate == ''){
item.endDate = Date.parse(new Date());
toDate = "/Date("+item.endDate+")/";
}
customClassData = "ganttRed";
tmpValues.from = fromDate;
tmpValues.to = toDate;
tmpValues.label = item.name+","+Number(item.scale)+"%";
tmpValues.customClass = customClassData;
tmpData.values[0] = tmpValues;
source[all] = tmpData;
all++;
});
具体需要注意tmpValues.label = item.name+”,”+Number(item.scale)+”%”;这一句
由于在需求中需要展示每个的进度,
自己在了解的文档中,传入的参数总是无法传入成功
若有人有更好的方法可请教下
createProgressBar: function (days, cls, desc, label, dataObj)
在jquery.fn.gantt.js大概800多行的位置有这个
由于在上面我把传入的label加了我的一个进度在里面
所以在这个添加色块的方法中对于传入的东西进行一个处理
var arr = label.split(",");
if(arr[1] == 'unfinded' || arr[1] == '0%'){
arr[1] = '0%';
var bar = $('<div class="bar">'+'<div style="float:left;">'+arr[1]+' '+arr[0]+'</div></div>')
.addClass(cls)
.css({
width: ((cellWidth * days) - barMarg) + 5
})
.data("dataObj", dataObj);
}else{
var bar = $('<div class="bar"><div style="width:'+arr[1]+';height:100%; float:left;background-color:#6F0;overflow:visible;white-space:nowrap">'+arr[1]+' '+arr[0]+'</div></div>')
.addClass(cls)
.css({
width: ((cellWidth * days) - barMarg) + 5
})
.data("dataObj", dataObj);
}
在传入的label进行简单的拿取
然后根据一个判断去添加色块,
主要是修改了bar添加色块时的代码,其余部分未改变
效果并没有很好
所以有别的方法希望大家能指教下