甘特图（dhtmlxgantt）入门宝典

效果图
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包留下邮箱
甘特图（dhtmlxgantt）入门宝典

猜你喜欢
