当前位置 : 主页 > 网页制作 > Dojo >

dojo甘特图插件扩展gantt chart

来源:互联网 收集:自由互联 发布时间:2021-06-15
这几天,又加了两个新功能,一个是,打开甘特图的时候,默认显示转到今天的位置,而不是项目开始日期,一个是加入了一个甘特图的里程碑功能。真相图如下 默认显示今天的比较简
这几天,又加了两个新功能,一个是,打开甘特图的时候,默认显示转到今天的位置,而不是项目开始日期,一个是加入了一个甘特图的里程碑功能。真相图如下



默认显示今天的比较简单,在ganttchart.js中加入一个函数即可
goToToday: function(){
      var a=newDate();
      var b=newDate(this.startDate);
      //this meansproject start date is after today
      if(b>a){
            return;
      }
      varc=Math.round((a - b) / 1000 / 60 / 60 / 24);
      vard=(c/this.totalDays)*this.maxTaskEndPos;
      //this meansthe project should be finished before today
      if(d>this.maxTaskEndPos){
            return;
      }
      this.contentData.scrollLeft = d;
},
显示甘特图里程碑的功能,则是新增了一个ganttMilestoneItem.js的文件,用以记录里程碑的一些信息,可以扩展,我用的是公司项目里的一些参数,代码如下:
define("dojox/gantt/GanttMilestoneItem", [
      "dojo/_base/declare",
      "dojo/domReady!"
], function(declare){
      returndeclare("dojox.gantt.GanttMilestoneItem", [], {
            constructor:function(configuration){
                  //id isrequired
                  this.id =configuration.id;
                  this.name =configuration.name || null;
                  this.startDate = configuration.startDate || new Date();
                  this.endDate= configuration.endDate || null;
                  this.percentage = configuration.percentage || 0;
                  this.description = configuration.description || null;
                  this.lastUpdate = configuration.lastUpdate || null;
                  this.gatewayNo = configuration.gatewayNo || null;
                  this.parentProjectId = configuration.parentProjectId || null;
                  this.gatewayStatus = configuration.gatewayStatus || null;
                  this.onTrackStatus = configuration.onTrackStatus || null;
            }
      });
});
然后在ganttchart.js中,新增一个画里程碑的函数
addMilestoneInPanelTime: function(row){
      var date =new Date(this.startDate);
      date.setDate(date.getDate() + parseInt(row.cells.length));
      var newCell= domConstruct.create("td", {
            align:"center",
            vAlign:"middle",
            className:"ganttDayNumber",
            innerHTML:this.pixelsPerDay > 20 ? "" : "",
            innerHTMLData: String(date.getDate()),
            data:row.cells.length
      },row);
      domStyle.set(newCell, "width", this.pixelsPerDay + "px");
      //show themilestone rhombus :Hu Wei
      for(vari=0;i
            var nowDay=date.getFullYear() + '-' + (date.getMonth()+1) + '-' +date.getDate();
            // if theday is a milestone's end date, the show the rhombus and thetoolTip
            if(nowDay==this.milestone[i].endDate)
            {
                  domClass.add(newCell, "ganttMilestone");
                  domAttr.set(newCell, 'milestoneIndex', i);
                  this._events.push(
                        on(newCell,"mouseover", lang.hitch(this, function(event){
                              var dayTime= event.target || event.srcElement;
                              var index =domAttr.get(dayTime, "milestoneIndex");
                              vartooltip='id : '+this.milestone[index].id+'
name : '+this.milestone[index].name+'
startDate : '+
                              this.milestone[index].startDate+'
endDate : '+this.milestone[index].endDate+'
percentage : '+
                              this.milestone[index].percentage+'
description : '+this.milestone[index].description+'
lastUpdate : '+
                              this.milestone[index].lastUpdate+'
gatewayNo : '+this.milestone[index].gatewayNo+'
parentProjectId : '+
                              this.milestone[index].parentProjectId+'
gatewayStatus : '+this.milestone[index].gatewayStatus+'
onTrackStatus : '+
                              this.milestone[index].onTrackStatus;
                              dijit.showTooltip(tooltip, newCell, ["above", "below"]);
                        }))
                  );
                  this._events.push(
                        on(newCell,"mouseout", lang.hitch(this, function(event){
                              var dayTime= event.target || event.srcElement;
                              dayTime&& dijit.hideTooltip(dayTime);
                        }))
                  );
            }
      }
},
然后,下面新增一个调用的函数
addMilestone: function(ganttMilestoneItem){
      //add themilestone items :Hu Wei
      this.milestone.push(ganttMilestoneItem);
},
setMilestone: function(){
      var tblTime= this.panelTime.firstChild.firstChild;
      varnewMilestoneRow = tblTime.insertRow(tblTime.rows.length);
      for(var i =0; i < this.totalDays; i++){
            this.addMilestoneInPanelTime(newMilestoneRow);
      }
}
最后在页面中调用即可
var gmi1=new GanttMilestoneItem({
        id:1,
      name:'1',
      startDate:'2012-9-11',
      endDate:'2013-9-12',
      percentage:50,
      description:'1 description',
      lastUpdate:'2013-3-23',
      gatewayNo:'1-01',
      parentProjectId:'',
      gatewayStatus:'1 gateway status',
      onTrackStatus:'1 on track status'
  });
  var gmi2=new GanttMilestoneItem({
        id:1,
      name:'1',
      startDate:'2012-9-11',
      endDate:'2013-11-2',
      percentage:50,
      description:'1 description',
      lastUpdate:'2013-3-23',
      gatewayNo:'1-01',
      parentProjectId:'',
      gatewayStatus:'1 gateway status',
      onTrackStatus:'1 on track status'
  });
  var gmi3=new GanttMilestoneItem({
        id:1,
      name:'1',
      startDate:'2012-9-11',
      endDate:'2013-8-19',
      percentage:50,
      description:'1 description',
      lastUpdate:'2013-3-23',
      gatewayNo:'1-01',
      parentProjectId:'',
      gatewayStatus:'1 gateway status',
      onTrackStatus:'1 on track status'
  });
  ganttChart.addMilestone(gmi1);
  ganttChart.addMilestone(gmi2);
  ganttChart.addMilestone(gmi3);
  ganttChart.setMilestone();
同样的,需要的代码的,四个字,请联系我!!
网友评论