dojo甘特图插件扩展gantt cha…

最近几周，公司为了管理项目，要做甘特图，甘特图的插件，要不是很烂，要不是不完善，要不就是收费的，昭来找去，也就dojo的甘特图比较好，但是还是文档奇少，官方文档，给了个例子，也不做说明，他以为我就能看懂了，我去年买了表啊。 无图无真相，先上图，

      首先吐槽下，初始化甘特图的时候   ganttChart = new GanttChart({     readOnly: false,        // optional: determine if gantt chart iseditable     dataFilePath:"gantt.json",     // optional:json data file path for load and save, default is"gantt_default.json" //saveProgramPath:"",     height: 400,            //optional: chart height in pixel, default is 400px     width:  document.body.offsetWidth-50,             // optional: chart width inpixel, default is 600px     withResource: true      //optional: display the resource chart or not   }, "gantt");               //"gantt"is the node container id of gantt chart widget
  ganttChart.init();
dataFilePath的使用，这里只是写了json的文件名，一句注释，连json数据的格式都没说，不过如果拿到demo后，可以通过函数getJSONData然后转为字符串alert出来，但是把得到字符串放到json文件保存后，还是无法显示json数据，于是继续调试，原来是 loadJSONData:function(filename){ var _this = this; _this.dataFilePath = filename ||_this.dataFilePath; request.get(_this.dataFilePath,{ sync: true }).then(function(response){ _this.loadJSONString( response);//此处原来是respons.text，但是get默认返回的就是text格式的字符串，所以去掉后，即可通过  ganttChart.loadJSONData("gantt.json");来加载数据 _this.buildUIContent(); console.log("Successfully! Loadeddata from: " + _this.dataFilePath); }, function(){ console.log("Failed! Load error: " +_this.dataFilePath); }); }
然后，在原来功能的基础上，公司测试部的老外说，需要加一个审批的功能，即在甘特图中加入的任务，新增的未审批任务需要以红色显示，审批后，才能显示绿色，于是乎，硬着头皮去修改，感谢dojo是开源的，有未压缩的代码。
首先在ganttTaskItem.js中，扩展一个属性： this.isApproval = configuration.isApproval ||"";
然后在tabmenu.js中的buildcontent方法下，加入一句 var taskSucAdd = this.createTab(11, "Add Successor Task", "t",true, this); taskSucAdd.addItem(1, "Id", "id", true); taskSucAdd.addItem(2, "Name", "name"); taskSucAdd.addItem(3, "Start Time", "startTime"); taskSucAdd.addItem(4, "Duration (hours)", "duration"); taskSucAdd.addItem(5, "Percent Complete (%)","percentage"); taskSucAdd.addItem(6, "Task Assignee", "taskOwner"); taskSucAdd.addItem(7, "Is Approval","isApproval"); taskSucAdd.addAction("addSuccessorTaskAction");
  根据createTab方法， createTab: function(id, desc, type, showOInfo, menu,withDefaultValue){ var tab = new contextMenuTab(id, desc, type, showOInfo, menu,withDefaultValue, this.ganttChart); this.arrTabs.push(tab); return tab; }
得知taskSucAdd是一个contextMenuTab对象，所以需要找到它的addItem方法，并且我们需要的是一个选择框，所以找到dojit的 Select控件，new一个出来 addItem: function(id, name, key, required){ var inputControl; if(key == "startTime" || key == "startDate"){ inputControl = new DateTextBox({type:"text",constraints:{datePattern:"yyyy.M.d", strict:true}}); }else if(key == "percentage"){ inputControl = new NumberSpinner({ constraints:{ max:100,min:0 }}); }else if(key == "duration"){ inputControl = new NumberSpinner({ constraints:{ min:0}}); }else if(key =="isApproval"){ inputControl = new Select({name:"isApproval",options: [ { label: "Yes", value: "yes"}, { label: "No", value: "no", selected:true }]}); }else { inputControl = new TextBox(); } this.arrItems.push({ id: id, name: name, control: inputControl, tab: this, key: key, required: required }); },
在addItem后要执行，taskSucAdd.addAction("addSuccessorTaskAction");，所以还要找到addAction方法，此处没有修改，次方法只是把需要执行的方法名的到，即addSuccessorTaskAction，然后找到addSuccessorTaskAction， addSuccessorTaskAction: function(){ if(!this.preValueValidation(this.arrItems)){ return; } var pr = this.object.project, id = this.arrItems[0].control.textbox.value, name = this.arrItems[1].control.textbox.value, startTime =this.decodeDate(this.arrItems[2].control.textbox.value), duration = this.arrItems[3].control.textbox.value, pc = this.arrItems[4].control.textbox.value, owner = this.arrItems[5].control.textbox.value, isApproval =this.arrItems[6].control.get('value'); if(lang.trim(id).length <= 0){ return; } var parentTaskId = !this.object.parentTask ? "" :this.object.parentTask.taskItem.id; var predTaskId = this.object.taskItem.id; if(pr.insertTask(id, name, startTime,duration, pc, predTaskId, owner, parentTaskId,isApproval)){ this.hide(); }else{ alert("Please adjust your Customization"); return; } this.tabMenu.ganttChart.resource &&this.tabMenu.ganttChart.resource.reConstruct(); },
可以看到，如果要执行成功，还要修改 insertTask方法，在ganttProjectControl.js中找到insertTask方法， insertTask: function(id, name, startTime, duration,percentage, previousTaskId, taskOwner, parentTaskId,isApproval){ var task = null; var _task = null; if(this.project.getTaskById(id)){ return false; } if((!duration) || (duration <this.ganttChart.minWorkLength)){ duration = this.ganttChart.minWorkLength; } if((!name) || (name == "")){ name = id; } if((!percentage) || (percentage == "")){ percentage = 0; }else{ percentage = parseInt(percentage); if(percentage < 0 || percentage > 100){ return false; } } var sortRequired = false; if((parentTaskId) && (parentTaskId != "")){ var parentTask = this.project.getTaskById(parentTaskId); if(!parentTask){ return false; } startTime = startTime || parentTask.startTime; if(startTime < parentTask.startTime){ return false; } task = new GanttTaskItem({ id: id, name: name, startTime: startTime, duration: duration, percentage: percentage, previousTaskId: previousTaskId, taskOwner: taskOwner, isApproval: isApproval }); if(!this.ganttChart.checkPosParentTask(parentTask,task)){ return false; } task.parentTask = parentTask; var _parentTask = this.getTaskById(parentTask.id); var isHide = false; if(_parentTask.cTaskItem[0].style.display == "none"){ isHide = true; }else if(_parentTask.cTaskNameItem[2]){ if(!_parentTask.isExpanded){ isHide = true; } } if(isHide){ if(_parentTask.childTask.length == 0){ this.ganttChart.openTree(_parentTask.parentTask); }else{ this.ganttChart.openTree(_parentTask); } } if(previousTaskId != ""){ var predTask = this.project.getTaskById(previousTaskId); if(!predTask){ return false; } if(predTask.parentTask){ if(predTask.parentTask.id != task.parentTask.id){ return false; } }else{ return false; } if(!this.ganttChart.checkPosPreviousTask(predTask,task)){ this.ganttChart.correctPosPreviousTask(predTask, task); } task.previousTask = predTask; } var isAdd = false; if(sortRequired) for(var i = 0; i <parentTask.cldTasks.length; i++){ if(task.startTime <parentTask.cldTasks[i].startTime){ parentTask.cldTasks.splice(i, 0, task); if(i > 0){ parentTask.cldTasks[i - 1].nextChildTask =parentTask.cldTasks[i]; parentTask.cldTasks[i].previousChildTask =parentTask.cldTasks[i - 1]; } if(parentTask.cldTasks[i + 1]){ parentTask.cldTasks[i + 1].previousChildTask =parentTask.cldTasks[i]; parentTask.cldTasks[i].nextChildTask = parentTask.cldTasks[i +1]; } isAdd = true; break; } } if(!isAdd){ if(parentTask.cldTasks.length > 0){ parentTask.cldTasks[parentTask.cldTasks.length -1].nextChildTask = task; task.previousChildTask =parentTask.cldTasks[parentTask.cldTasks.length - 1]; } parentTask.cldTasks.push(task); } if(parentTask.cldTasks.length == 1){ _parentTask.cTaskNameItem[2] =_parentTask.createTreeImg(); } _task = new GanttTaskControl(task, this,this.ganttChart); _task.create(); if(task.nextChildTask) _task.nextChildTask =_task.project.getTaskById(task.nextChildTask.id); _task.adjustPanelTime(); var rowHeight = this.ganttChart.heightTaskItem +this.ganttChart.heightTaskItemExtra; _task.shiftCurrentTasks(_task, rowHeight);//23 }else{ startTime = startTime || this.project.startDate; task = new GanttTaskItem({ id: id, name: name, startTime: startTime, duration: duration, percentage: percentage, previousTaskId: previousTaskId, taskOwner: taskOwner, isApproval: isApproval }); if(task.startTime <= this.ganttChart.startDate){ return false; } if(previousTaskId != ""){ var predTask = this.project.getTaskById(previousTaskId); if(!predTask){ return false; } if(!this.ganttChart.checkPosPreviousTask(predTask,task)){ this.ganttChart.correctPosPreviousTask(predTask, task); } if(predTask.parentTask){ return false; } task.previousTask = predTask; } var isAdd = false; if(sortRequired){ for(var i = 0; i < this.project.parentTasks.length;i++){ var ppTask = this.project.parentTasks[i]; if(startTime < ppTask.startTime){ this.project.parentTasks.splice(i, 0, task); if(i > 0){ this.project.parentTasks[i - 1].nextParentTask = task; task.previousParentTask = this.project.parentTasks[i -1]; } if(this.project.parentTasks[i + 1]){ this.project.parentTasks[i + 1].previousParentTask =task; task.nextParentTask = this.project.parentTasks[i + 1]; } isAdd = true; break; } } } if(!isAdd){ if(this.project.parentTasks.length > 0){ this.project.parentTasks[this.project.parentTasks.length -1].nextParentTask = task; task.previousParentTask =this.project.parentTasks[this.project.parentTasks.length -1]; } this.project.parentTasks.push(task); } _task = new GanttTaskControl(task, this,this.ganttChart); _task.create(); if(task.nextParentTask) _task.nextParentTask =_task.project.getTaskById(task.nextParentTask.id); _task.adjustPanelTime(); this.arrTasks.push(_task); var rowHeight = this.ganttChart.heightTaskItem +this.ganttChart.heightTaskItemExtra; _task.shiftCurrentTasks(_task, rowHeight); this.projectItem[0].style.display = "inline"; this.setPercentCompleted(this.getPercentCompleted()); this.shiftProjectItem(); this.showDescrProject(); } this.ganttChart.checkHeighPanelTasks(); this.ganttChart.checkPosition(); return _task; },
乱七八糟的一大坨，基本看不懂，应该是一些验证的东西，好在我只是加个属性，不需要验证日期是否过期什么的，所以，加上标红的两句，ok了。在现实对话框的时候，又涉及到了一些赋值操作等一些地方需要小修小补的，代码不贴了，太多。 contextMenuTab.js中新增 reapprovalTaskAction函数，设置修改后的审批值 reapprovalTaskAction: function(){ var isApproval = this.arrItems[0].control.get('value'); //alert('isApproval---'+isApproval); this.object. setIsApproval(isApproval); this.hide(); }, 所以还要一个setIsApproval函数，在ganttTaskControl.js中新增次函数 setIsApproval: function(isApproval){// reapproval function byHu Wei this.taskItem.isApproval = isApproval; //get the percentage node rc0, consult the functionsetPercentCompleted :by Hu Wei var trow =this.cTaskItem[0].childNodes[0].firstChild.rows[0], rc0 = trow.cells[0], rc1 = trow.cells[1]; if(isApproval=='no'){ domClass.replace(rc0.firstChild,"ganttImageTaskProgressFi lledNo","ganttImageTaskProgressFi lled"); }else { domClass.replace(rc0.firstChild,"ganttImageTaskProgressFi lled","ganttImageTaskProgressFi lledNo"); } }， 这样就基本ok了，后面还要求新增task的时候，id要实现自动话，其实就是遍历整个json数据，取最大值了，只是人家插件本来的初衷是id可以是非数字的，所以这个功能有点奇怪，暂不贴出来。 最后，说了这么多，也贴了这么多代码，相信没人看得懂了，我自己以后也未必看得懂， chart（一）" title="dojo甘特图插件扩展gantt chart（一）" style="line-height:1.5; text-indent:2em" d="6106" s="b7b_dd2" t="gif"> ，所以还是献上demo的好，没找到上传附件的功能，想要附件的，请评论并留下邮箱，我会发给你的。嘿嘿，突然想起，曾经在eoe也这样搞过，最后有200多条回复，发邮件差点累死，而且最后还有个学弟拿了我的代码去做毕业设计，最后还混了顿饭，这次有可能也混顿饭吃吗？chart（一）" title="dojo甘特图插件扩展gantt chart（一）" style="line-height:1.5; text-indent:2em" d="6106" s="b7b_dd2" t="gif">