网站：http://dhtmlx.com/docs/products/dhtmlxGantt/
<script src=“gant/dhtmlxgrntt.js” type="text/javascript" chartset="utf-8"></script>
<link rel="stylesheet" href="gant/skins/dhtmlxgantt_terrace.css" type="text/css" media="screen" title="no title" charset="utf-8">
| <!DOCTYPE html> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| <title>DHTMLX Gantt Chart - Basic Demo</title> | |
| <meta name="description" content="A basic demo of dhtmlxGantt, an interactive Gantt chart for visualization of project schedule."/> | |
| <meta name="keywords" content="javascript, gantt chart, gantt, charting, library, ajax, ui, project, task, milestone, management, visualization, demo"/> | |
| <script src="gantt/dhtmlxgantt.js?v=2.1" type="text/javascript" charset="utf-8"></script> | |
| <link rel="stylesheet" href="gantt/skins/dhtmlxgantt_terrace.css?v=2.0" type="text/css" media="screen" title="no title" charset="utf-8"> | |
| <style type="text/css" media="screen"> | |
| html, body{ | |
| margin:0px; | |
| padding:0px; | |
| height:100%; | |
| overflow:hidden; | |
| } | |
| .weekend{ background: #f4f7f4 !important;} | |
| .gantt_selected .weekend{ | |
| background:#FFF3A1 !important; | |
| } | |
| </style> | |
| </head> | |
| <body onresize="modSampleHeight()"> | |
| <!--[if lte IE 7]> | |
| <style type="text/css">div{display:none;}</style> | |
| <h4 style='text-align:center; font-family:Arial; margin-top:50px;'>Unfortunately dhtmlxGantt 2.0 doesn't support IE6 and IE7 browsers.<br>Please open these demos in different browser or in IE8+.</h3> | |
| <![endif]--> | |
| <script> | |
| function modSampleHeight(){ | |
| var headHeight = 100; | |
| var sch = document.getElementById("gantt_here"); | |
| sch.style.height = (parseInt(document.body.offsetHeight)-headHeight)+"px"; | |
| var contbox = document.getElementById("contbox"); | |
| contbox.style.width = (parseInt(document.body.offsetWidth)-300)+"px"; | |
| gantt.setSizes(); | |
| } | |
| </script> | |
| <div style="height:95px;background-color:#3D3D3D;border-bottom:5px solid #828282; overflow:hidden;"> | |
| <a style="float:left;margin:22px 0 0 25px;" href="03_hours.html"><img border="0" src="images/btn-left.gif"></a> | |
| <div id="contbox" style="float:left;color:white;margin:22px 75px 0 75px; overflow:hidden;font: 17px Arial,Helvetica;color:white"> | |
| <div style="border-right:5px solid #2D8EB6;color:#2D8EB6;width:175px;height:50px;float:left;text-align:right;padding-right:25px;">Basic Gantt Chart</div> | |
| <div style="font-size:12px;padding-left:225px;max-width:500px;">This is a basic Gantt chart demo that displays tasks schedule in weeks and days.</div> | |
| <div style="font-size:12px;padding-left:225px;margin-top:5px;color:#949292;max-width:500px;"> | |
| You can drag-and-drop and resize the task bars to change the start/end time and duration of the tasks. Also, you can double-click on the task bar or on corresponding grid row to call a lightbox with form to edit the task details. Click on “+” sign to create a new child task.</div> | |
| </div> | |
| <a style="float:right;margin:22px 25px 0 0;" href="02_features.html"><img border="0" src="images/btn-right.gif"></a> | |
| </div> | |
| <div id="gantt_here" style='width:100%; height:100%;'></div> | |
| <script type="text/javascript"> | |
| var demo_tasks = { | |
| data:[ | |
| {"id":1, "text":"Office itinerancy", "type":gantt.config.types.project, "order":"10", progress: 0.4, open: false}, | |
| {"id":2, "text":"Office facing", "type":gantt.config.types.project, "start_date":"02-04-2013", "duration":"8", "order":"10", progress: 0.6, "parent":"1", open: true}, | |
| {"id":3, "text":"Furniture installation", "type":gantt.config.types.project, "start_date":"11-04-2013", "duration":"8", "order":"20", "parent":"1", progress: 0.6, open: true}, | |
| {"id":4, "text":"The employee relocation", "type":gantt.config.types.project, "start_date":"13-04-2013", "duration":"6", "order":"30", "parent":"1", progress: 0.5, open: true}, | |
| {"id":5, "text":"Interior office", "start_date":"02-04-2013", "duration":"7", "order":"3", "parent":"2", progress: 0.6, open: true}, | |
| {"id":6, "text":"Air conditioners check", "start_date":"03-04-2013", "duration":"7", "order":"3", "parent":"2", progress: 0.6, open: true}, | |
| {"id":7, "text":"Workplaces preparation", "start_date":"11-04-2013", "duration":"8", "order":"3", "parent":"3", progress: 0.6, open: true}, | |
| {"id":8, "text":"Preparing workplaces", "start_date":"14-04-2013", "duration":"5", "order":"3", "parent":"4", progress: 0.5, open: true}, | |
| {"id":9, "text":"Workplaces importation", "start_date":"14-04-2013", "duration":"4", "order":"3", "parent":"4", progress: 0.5, open: true}, | |
| {"id":10, "text":"Workplaces exportation", "start_date":"14-04-2013", "duration":"3", "order":"3", "parent":"4", progress: 0.5, open: true}, | |
| {"id":11, "text":"Product launch", "type":gantt.config.types.project, "order":"5", progress: 0.6, open: true}, | |
| {"id":12, "text":"Perform Initial testing", "start_date":"03-04-2013", "duration":"5", "order":"3", "parent":"11", progress: 1, open: true}, | |
| {"id":13, "text":"Development", "type":gantt.config.types.project, "start_date":"02-04-2013", "duration":"7", "order":"3", "parent":"11", progress: 0.5, open: true}, | |
| {"id":14, "text":"Analysis", "start_date":"02-04-2013", "duration":"6", "order":"3", "parent":"11", progress: 0.8, open: true}, | |
| {"id":15, "text":"Design", "type":gantt.config.types.project, "start_date":"02-04-2013", "duration":"5", "order":"3", "parent":"11", progress: 0.2, open: false}, | |
| {"id":16, "text":"Documentation creation", "start_date":"02-04-2013", "duration":"7", "order":"3", "parent":"11", progress: 0, open: true}, | |
| {"id":17, "text":"Develop System", "start_date":"03-04-2013", "duration":"2", "order":"3", "parent":"13", progress: 1, open: true}, | |
| {"id":25, "text":"Beta Release", "start_date":"06-04-2013", "order":"3","type":gantt.config.types.milestone, "parent":"13", progress: 0, open: true}, | |
| {"id":18, "text":"Integrate System", "start_date":"08-04-2013", "duration":"2", "order":"3", "parent":"13", progress: 0.8, open: true}, | |
| {"id":19, "text":"Test", "start_date":"10-04-2013", "duration":"4", "order":"3", "parent":"13", progress: 0.2, open: true}, | |
| {"id":20, "text":"Marketing", "start_date":"10-04-2013", "duration":"4", "order":"3", "parent":"13", progress: 0, open: true}, | |
| {"id":21, "text":"Design database", "start_date":"03-04-2013", "duration":"4", "order":"3", "parent":"15", progress: 0.5, open: true}, | |
| {"id":22, "text":"Software design", "start_date":"03-04-2013", "duration":"4", "order":"3", "parent":"15", progress: 0.1, open: true}, | |
| {"id":23, "text":"Interface setup", "start_date":"03-04-2013", "duration":"5", "order":"3", "parent":"15", progress: 0, open: true}, | |
| {"id":24, "text":"Release v1.0", "start_date":"15-04-2013", "order":"3","type":gantt.config.types.milestone, "parent":"11", progress: 0, open: true} | |
| ], | |
| links:[ | |
| {id:"1",source:"1",target:"2",type:"1"}, | |
| {id:"2",source:"2",target:"3",type:"0"}, | |
| {id:"3",source:"3",target:"4",type:"0"}, | |
| {id:"4",source:"2",target:"5",type:"2"}, | |
| {id:"5",source:"2",target:"6",type:"2"}, | |
| {id:"6",source:"3",target:"7",type:"2"}, | |
| {id:"7",source:"4",target:"8",type:"2"}, | |
| {id:"8",source:"4",target:"9",type:"2"}, | |
| {id:"9",source:"4",target:"10",type:"2"}, | |
| {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:"25",type:"0"}, | |
| {id:"23",source:"25",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"}, | |
| {id:"22",source:"13",target:"24",type:"0"} | |
| ] | |
| }; | |
| gantt.templates.scale_cell_class = function(date){ | |
| if(date.getDay()==0||date.getDay()==6){ | |
| return "weekend"; | |
| } | |
| }; | |
| gantt.templates.task_cell_class = function(item,date){ | |
| if(date.getDay()==0||date.getDay()==6){ | |
| return "weekend" ; | |
| } | |
| }; | |
| gantt.templates.rightside_text = function(start, end, task){ | |
| if(task.type == gantt.config.types.milestone){ | |
| return task.text; | |
| } | |
| return ""; | |
| } | |
| gantt.config.columns = [ | |
| {name:"text", label:"Task name", width:"*", tree:true }, | |
| {name:"start_time", label:"Start time", template:function(obj){ | |
| return gantt.templates.date_grid(obj.start_date); | |
| }, align: "center", width:60 }, | |
| {name:"duration", label:"Duration", align:"center", width:60}, | |
| {name:"add", label:"", width:44 } | |
| ]; | |
| gantt.config.grid_width = 390; | |
| gantt.config.date_grid = "%F %d" | |
| gantt.config.scale_height = 60; | |
| gantt.config.subscales = [ | |
| { unit:"week", step:1, date:"Week #%W"} | |
| ]; | |
| gantt.init("gantt_here"); | |
| modSampleHeight(); | |
| gantt.parse(demo_tasks); | |
| </script> | |
| </body> |
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
