128 lines
5.0 KiB
HTML
128 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>演示</title>
|
|
</head>
|
|
<script src="dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="dhtmlxgantt_marker.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="locale_cn.js" type="text/javascript"></script>
|
|
<link rel="stylesheet" href="dhtmlxgantt.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
|
|
|
<style type="text/css">
|
|
html, body{ height:100%; padding:0px; margin:0px; overflow: hidden;}
|
|
.gantt_task_line.gantt_dependent_task {
|
|
background-color: #eee;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.gantt_task_line.gantt_dependent_task .gantt_task_progress {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.gantt_task_line.gantt_dependent_task .gantt_task_content {
|
|
color: #999;
|
|
}
|
|
|
|
.gantt_task_line.gantt_selected {
|
|
box-shadow: 0 0 5px #fff;
|
|
}
|
|
|
|
.status_line {
|
|
background-color: #0ca30a;
|
|
}
|
|
</style>
|
|
<body>
|
|
|
|
<div id="gantt_here" style='width:100%;height:100%;'></div>
|
|
|
|
<script type="text/javascript">
|
|
var demo_tasks = {
|
|
"data":[
|
|
{"id":11, "text":"Project #1", "start_date":"", "duration":"", "progress": 0.6, "open": true},
|
|
|
|
{"id":12, "text":"Task #1", "start_date":"03-04-2013", "duration":"5", "parent":"11", "progress": 1, "open": true},
|
|
{"id":13, "text":"Task #2", "start_date":"", "duration":"", "parent":"11", "progress": 0.5, "open": true},
|
|
{"id":14, "text":"Task #3", "start_date":"02-04-2013", "duration":"6", "parent":"11", "progress": 0.8, "open": true},
|
|
{"id":15, "text":"Task #4", "start_date":"", "duration":"", "parent":"11", "progress": 0.2, "open": true},
|
|
{"id":16, "text":"Task #5", "start_date":"02-04-2013", "duration":"7", "parent":"11", "progress": 0, "open": true},
|
|
|
|
{"id":17, "text":"Task #2.1", "start_date":"03-04-2013", "duration":"2", "parent":"13", "progress": 1, "open": true},
|
|
{"id":18, "text":"Task #2.2", "start_date":"06-04-2013", "duration":"3", "parent":"13", "progress": 0.8, "open": true},
|
|
{"id":19, "text":"Task #2.3", "start_date":"10-04-2013", "duration":"4", "parent":"13", "progress": 0.2, "open": true},
|
|
{"id":20, "text":"Task #2.4", "start_date":"10-04-2013", "duration":"4", "parent":"13", "progress": 0, "open": true},
|
|
{"id":21, "text":"Task #4.1", "start_date":"03-04-2013", "duration":"4", "parent":"15", "progress": 0.5, "open": true},
|
|
{"id":22, "text":"Task #4.2", "start_date":"03-04-2013", "duration":"4", "parent":"15", "progress": 0.1, "open": true},
|
|
{"id":23, "text":"Task #4.3", "start_date":"03-05-2013", "duration":"5", "parent":"15", "progress": 0, "open": true},
|
|
{"id":24, "text":"Task #4.3", "start_date":"70-05-2013", "duration":"5", "parent":"15", "progress": 0, "open": true},
|
|
{"id":25, "text":"Task #4.3", "start_date":"11-05-2013", "duration":"5", "parent":"15", "progress": 0, "open": true}
|
|
],/*
|
|
"links":[
|
|
{"id":"10","source":"11","target":"12","type":"1"},
|
|
{"id":"11","source":"11","target":"13","type":"1"},
|
|
{"id":"12","source":"11","target":"14","type":"1"},
|
|
{"id":"13","source":"11","target":"15","type":"1"},
|
|
{"id":"14","source":"11","target":"16","type":"1"},
|
|
{"id":"15","source":"13","target":"17","type":"1"},
|
|
{"id":"16","source":"17","target":"18","type":"0"},
|
|
{"id":"17","source":"18","target":"19","type":"0"},
|
|
{"id":"18","source":"19","target":"20","type":"0"},
|
|
{"id":"19","source":"15","target":"21","type":"2"},
|
|
{"id":"20","source":"15","target":"22","type":"2"},
|
|
{"id":"21","source":"15","target":"23","type":"2"}
|
|
]*/
|
|
};
|
|
|
|
/*
|
|
gantt.config.lightbox.sections = [
|
|
{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
|
|
{name: "start_date", type: "duration", map_to: "auto"}
|
|
];
|
|
*/
|
|
|
|
gantt.config.columns = [
|
|
{name:"text", label:"任务列表", tree:true, width:'*'},
|
|
// {name:"start_date", align:'center', label:"开始日期", width:'80'},
|
|
// {name:"duration", align:'center', label:"持续(天)", width:'60'},
|
|
];
|
|
|
|
gantt.config.scale_unit = "month";
|
|
gantt.config.date_scale = "%Y - %m";
|
|
gantt.config.min_column_width = 60;
|
|
gantt.config.duration_unit = "day";
|
|
gantt.config.scale_height = 50;
|
|
gantt.config.row_height = 26;
|
|
gantt.config.grid_width = 220;
|
|
|
|
gantt.config.show_links = false;
|
|
|
|
gantt.attachEvent("onTaskDblClick", function (task_id) {
|
|
var task = gantt.getTask(task_id);
|
|
console.log(task);
|
|
});
|
|
|
|
var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
|
|
var today = new Date(2013, 3, 5);
|
|
gantt.addMarker({
|
|
start_date: today,
|
|
css: "today",
|
|
text: "今天",
|
|
title:"今天: "+ date_to_str(today)
|
|
});
|
|
|
|
/*
|
|
var start = new Date(2013, 3, 4);
|
|
gantt.addMarker({
|
|
start_date: start,
|
|
css: "status_line",
|
|
text: "项目开始",
|
|
title:"项目开始: "+ date_to_str(start)
|
|
});
|
|
*/
|
|
|
|
gantt.config.subscales = [
|
|
{unit:"day", step:1, date:"%d %D"}
|
|
];
|
|
|
|
gantt.init("gantt_here");
|
|
gantt.parse(demo_tasks);
|
|
</script>
|
|
</body> |