先看看图的效果
PlusGantt（普加甘特图）是使用Javascript开发的、基于Web网页的甘特图控件。可广泛应用于项目管理系统、 ERP 系统、MES系统或其它的任务资源分配相关领域。基于WEB网页显示，无需安装任何插件。显示为左侧任务表格、右侧时间轴刻度条形图的甘特图界面。支持跟踪甘特图视图。可对比“计划任务”与“实际任务”的区别。支持分级加载，不一次性加载全部数据。这样可以支持大数据量显示。支持年/月/日/时/分/秒等不同时间刻度单位。支持表格列、条形图外观、ToolTip提示信息、右键菜单等任意自定义。跨所有浏览器显示，如IE(1.5+)、FireFox、Chrome、Opera、Safari等。跨任意服务端平台，如、ASP、PHP、JSP、ColdFusion、Ruby on Rails等都可以使用。语言本地化。包括英语、中文、日文和其他任意的语言。 PlusGantt只需要您提供一个简单的数据结构，就能在WEB网页上显示一个漂亮的甘特图。您可以轻松修改它任意部位的外观，比如单元格、条形图、提示信息等。
甘特图数据结构
1.列表结构（UID、ParentTaskUID）：
[{"UID": "1","Name": "项目范围规划","Duration": 8,"Start": "-01-01T00:00:00","Finish": "-01-10T00:00:00","PercentComplete": 0,"Summary": 1,"Critical": 0,"Milestone": 0,"PredecessorLink": [],"ParentTaskUID": -1},{"UID": "2","Name": "确定项目范围","Duration": 1,"Start": "-01-01T00:00:00","Finish": "-01-01T23:23:59","PercentComplete": 0,"Summary": 0,"Critical": 0,"Milestone": 0,"PredecessorLink": [],"ParentTaskUID": "1"},{"UID": "3","Name": "获得项目所需资金","Duration": 2,"Start": "-01-02T00:00:00","Finish": "-01-03T23:23:59","PercentComplete": 0,"Summary": 0,"Critical": 0,"Milestone": 0,"PredecessorLink": [{"Type": 1,"PredecessorUID": "2" }],"ParentTaskUID": "1"},...]
2.树形结构（children）：
[{UID: "1", //任务唯一标识符Name: "项目范围规划", //任务名称Duration: 4, //工期Start: "-01-01T00:00:00", //开始日期Finish: "-01-04T23:59:59", //完成日期PercentComplete: 14, //完成百分比Summary: 1, //摘要任务Critical: 1,//关键任务 Milestone: 0, //里程碑 PredecessorLink: [], //前置任务 children: [{UID: "2",Duration: 4,Start: "-01-01T08:00:00",Finish: "-01-01T12:00:00",PercentComplete: 100,Summary: 0,Critical: 1,Name: "确定项目范围",Milestone: 0,PredecessorLink: []},{UID: "3",Duration: 8,Start: "-01-01T13:00:00",Finish: "-01-02T12:00:00",PercentComplete: 0,Summary: 0,Critical: 1,Name: "获得项目所需资金",Milestone: 0,PredecessorLink: [//前置任务{PredecessorUID: "2",Type": 1}]},....//更多子任务 ]},.... //更多任务]
任务属性描述如下：UID：必须。String。唯一标识符。是一个任意的字符串或数字，确保任务UID不重复。Name：必须。String。任务名称。Start：必须。Date。开始日期。Finish：必须。Date。完成日期。Duration：必须。Number。工期。PercentComplete：必须。Number(0~100)。完成百分比。显示为上下居中的进度条。PredecessorLink：Array。前置任务。四种任务关系Type：完成-完成(FF) 0，完成-开始(FS) 1，开始-完成(SF) 2，开始-开始(SS) 3。Summary：Number(0或1)。摘要任务。当一个任务下有子任务的时候，这个任务就是摘要任务，当Summary为1时，此任务会两端黑色箭头显示。Critical：Number(0或1)。关键任务。当Critical为1时，显示一个红色条形图。Milestone：Number(0或1)。里程碑。当Milestone为1时，显示一个菱形图标。
对页面的操作基于原始Dom元素的。所以，你可以不用做任何额外的处理，按PlusProject正常的例子，把项目甘特图对象加入到页面元素就可以了。其次，对于ExtJS这样封装度很高的框架，可以从Ext对象找到它的dom，然后render加入即可。使用代码如下：//获取ext控件对象var extControl = Ext.get(id);//设置尺寸为100%自适应gantt.setStyle("width:100%;height:100%");//把project加入到ext控件对象的dom属性中gantt.render(extControl.dom);
只需要这样设置后，PlusProject就能在Ext的布局面板中自动调整尺寸大小，看上去跟Ext原生的控件一样了。
语言本地化如果要显示他语言界面，只需要引用locale文件夹下资源js文件即可，例如英文资源包使用如下：<script src="../scripts/miniui/locale/en_US.js" type="text/javascript"></script>
PlusGantt ( API )
属性可以从对象直接读取，但是不能进行赋值操作。如果想对属性进行赋值，必须使用提供的方法。
var gantt = new PlusGantt();var visible= gantt.visible; //正确gantt.visible= true; //错误!!!gantt.setVisible(true); //正确
事件通过如下方式监听事件：
functon onTaskDblClick(e){var project = e.source;var task = e.task;//e是事件对象, 具体请看每个事件的"参数类型" }gantt.on('taskdblclick', onTaskDblClick);
常见问题
自定义列
开发者可以根据自己扩展的任务属性类型，来创建自己的列。
具体请参考"自定义列示例"。
自定义单元格
通过监听处理"drawcell"事件，可以根据任务信息，设置行、单元格样式，以及自定义单元格Html内容。
gantt.on("drawcell", function (e) {var task = e.record, column = e.column, field = e.field;//单元格样式if (column.name == "Name") {e.cellCls = "mycellcls";}//行样式if (task.Summary == 1) {e.rowCls = "myrowcls";}////自定义单元格Html。如果是工期列, 并且工期大与5天, 显示红色if (field == "Name" && task.Duration > 5) {e.cellHtml = '<b style="color:red;">' + task.Name + '</b>';}if (field == "Name" && task.Duration <= 2) {e.cellHtml = '<span style="color:blue;">' + task.Name + '</span>';}if (task.Duration == 0) {e.rowCls = "deletetask";}});
自定义条形图外观
开发者可以控制右侧条形图的HTML外观，达到任意的条形图效果：
//1)自定义条形图外观显示gantt.on("drawitem", function (e) {var item = e.item;var left = e.itemBox.left,top = e.itemBox.top,width = e.itemBox.width,height = e.itemBox.height;if (!item.Summary && !item.Milestone) {var percentWidth = width * (item.PercentComplete / 100);e.itemHtml = '<div id="' + item._id + '" class="myitem" style="left:' + left + 'px;top:' + top + 'px;width:' + width + 'px;height:' + (height) + 'px;">';e.itemHtml += '<div style="width:' + (percentWidth) + 'px;" class="percentcomplete"></div>';e.itemHtml += '</div>';//e.ItemHtml = '<a href="" style="left:'+left+'px;top:'+top+'px;width:'+width+'px;height:'+(height-2)+'px;" class="myitem">111</a>';}});//2)自定义条形图提示信息gantt.on('itemtooltipneeded', function (e) {var task = e.task;e.tooltip = "<div>任务：" + task.Name + "</div>"//+ "<div ><div style='float:left;'>进度：<b>"+task.PercentComplete + "%</b></div>"//+ "<div style='float:right;'>工期："+task.Duration + "日</div></div>"+ "<div style='clear:both;'>开始日期：" + mini.formatDate(task.Start, 'yyyy-MM-dd') + "</div>"+ "<div>完成日期：" + mini.formatDate(task.Finish, 'yyyy-MM-dd') + "</div>";});
自定义单元格可编辑
通过监听表格的"cellbeginedit"事件，可以控制每个行、每个单元格是否可编辑。
//控制单元格是否可编辑gantt.on("cellbeginedit", function (e) {var task = e.record, column = e.column, field = e.field;if (task.Summary == 1) {e.cancel = true;}if (field == 'Duration') {e.cancel = true;}});
悬停显示内容
/2)自定义条形图提示信息gantt.on('itemtooltipneeded', function (e) {var task = e.task;e.tooltip = "<div>任务：" + task.Name + "</div>"//+ "<div ><div style='float:left;'>进度：<b>"+task.PercentComplete + "%</b></div>"//+ "<div style='float:right;'>工期："+task.Duration + "日</div></div>"+ "<div style='clear:both;'>开始日期：" + mini.formatDate(task.Start, 'yyyy-MM-dd') + "</div>"+ "<div>完成日期：" + mini.formatDate(task.Finish, 'yyyy-MM-dd') + "</div>";});
改变ID，成为树形序号
var gantt_arr = gantt.data.Tasks;for(var i = 0 ; i < gantt_arr.length;i++){gantt_arr[i].ID = i+1;}var children = e.task;if(!(children.children)){}else{if (children.children) {for (var i = 0; i < children.children.length; i++) {children.children[i].ID=children.ID+'.'+(i+1);getChildren(children.children[i]);}}}
如果觉得《普加甘特图使用》对你有帮助，请点赞、收藏，并留下你的观点哦！
