您的位置：首页 > Web前端 > HTML

甘特图（dhtmlxgantt）入门宝典

2018-04-09 17:56 218 查看

效果图

2、代码说话（jsp）<%@ page pageEncoding="utf-8"%>
<%@page import="org.apache.commons.lang.time.DateFormatUtils"%>
<script type="text/javascript" src="${ctx}/scripts/jquery.js"></script>

<head>
<title>结果</title>
<script src="${ctx}/scripts/dhtmlxgantt/codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
<script src="${ctx}/scripts/dhtmlxgantt/codebase/locale/locale_cn.js" type="text/javascript" charset="utf-8"></script>
<script src="${ctx}/scripts/dhtmlxgantt/codebase/ext/dhtmlxgantt_marker.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="${ctx}/scripts/dhtmlxgantt/codebase/skins/dhtmlxgantt_meadow.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
body{
margin:0px;
padding:0px;
height:100%;
overflow:auto;
}
</style>
<script type="text/javascript">
//后台取横坐标
var ganttType = ${ganttType};

var tasks={
data:[
{id:1, text:"项目 #1", start_date:"2016-05-01",end_date:"2018-05-01", progress:0.6, open:true},
{id:2, text:"项目 #1", start_date:"2016-05-01",end_date:"2017-05-01", progress:1, open:true}
],
links:[
{id:1, source:1, target:2, type:"1"},
{id:2, source:1, target:3, type:"1"}
};
/*

● data - 定义甘特图中的任务
　　○ id - (string, number)任务id
　　○ start_date - (Date)任务开始日期
　　○ text - (string)任务描述
　　○ progress - (number) 任务完成度，0到1
　　○ duration - (number) 在当前时间刻度下的任务持续周期
　　○ parent - (number) 父任务的id
● links - 定义甘特图中的任务关联线
　　○ id - (string, number) 关联线id
　　○ source - (number) 数据源任务的id
　　○ target - (number) 目标源任务的id
　　○ type - (number) 关联线类型：0 - “结束到开始”，1 - “开始到开始”，2 - “结束到结束” */

$(function(){
if("1"==ganttType){
//年
gantt.config.scale_unit = "year";
gantt.config.step = 1;
gantt.config.date_scale = "%Y";
}else if("2"==ganttType){
//月
gantt.config.scale_unit = "year";
gantt.config.date_scale = "%Y";

gantt.config.scale_height = 50;

gantt.config.subscales = [
{unit:"month", step:1, date:"%F" }
];
}else if("3"==ganttType){
//日
gantt.config.scale_unit = "month";
gantt.config.date_scale = "%F, %Y";

gantt.config.scale_height = 50;
gantt.config.subscales = [
{unit:"day", step:1, date:"%j" }
];
gantt.config.min_column_width = 20;
}else if("4"==ganttType){
//周
var weekScaleTemplate = function(date){
var dateToStr = gantt.date.date_to_str("%d %M");
var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate);
};

gantt.config.scale_unit = "week";
gantt.config.step = 1;
gantt.templates.date_scale = weekScaleTemplate;
gantt.config.subscales = [
{unit:"day", step:1, date:"%D" }
];
gantt.config.min_column_width = 20;
gantt.config.scale_height = 50;
}

gantt.config.xml_date = "%Y-%m-%d";
//调整颜色
gantt.templates.grid_row_class = function(start, end, item){
return item.$level==0?"gantt_project":"";
};
gantt.templates.task_row_class = function(start, end, item){
return item.$level==0?"gantt_project":"";
};
gantt.templates.task_class = function(start, end, item){
return item.$level==0?"gantt_project":"";
};
//将今天线划出
var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
var today = new Date();
gantt.addMarker({
start_date: today,
css: "today",
text: "Today",
title:"Today: "+ date_to_str(today)
});

/* gantt.attachEvent("onTaskClick", function(id, e) {
var task = gantt.getTask(id);
alert("项目："+task.text+" 完成率："+task.progress);
}); */

gantt.templates.task_text=function(start,end,task){
if(task.progress!=0){
return task.progress*100+"%";
}else{
return " ";
}
};
gantt.init("gantt_here");
gantt.parse(tasks);

});

/* function xiazai(){
gantt.exportToPDF({
name:"gantt.pdf",
locale:"cn"
});
} */

</script>
</head>

<body>
<div>
<div id="gantt_here" style='width:100%; height:100%;overflow:auto' >
</div>
</div>
</body>
</html>

3、甘特图只读的设置
（1）在dhtmlxgantt.js中
8956行改为： readonly:true
（2）在dhtmlxgantt.js中
8980   /* {name:"add", width:'44' }*/ 将其注释掉
4、需要jar包留下邮箱

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 甘特图 dhtmlgantt gantt

相关文章推荐

新的分享

章节导航