甘特图事件

EdoResourceGantt是由:左侧TreeGrid,和右侧ResourceGantt组成的。
这里的事件,是针对ResourceGantt资源条形图对象的。

var gantt = edogantt.gantt; //资源条形图对象

拖拽调节事件

ResourceGantt有如下几个事件,都是跟拖拽相关的:

  • itemdragstart:条形图开始拖拽。
  • itemdrag:条形图拖拽移动中。
  • itemdragcomplete:条形图拖拽完毕。

我们通常只需要处理itemdragcomplete事件,通过事件对象,我们可以知道拖拽调节的属性是开始日期还是完成日期,旧值和新值分别是多少,从而做出数据改动的处理。

//监听gantt的拖拽操作事件
gantt.on('itemdragcomplete', function(e){
    var resource = e.item, record = e.record, targetRecord = e.targetRecord;
    if(!targetRecord && e.action == 'Item') return;   //如果没有目标行, 表示拖拽到外面去了, 不操作
    
    var dataGantt = this.data;
    
    //获得操作后的值,将其覆盖掉任务原来的值,就修改了任务属性
    var value = e[e.action];    
    //设置后,不会因为任务多次操作,而不断引发视图刷新
    dataGantt.beginChange();    
    switch(e.action){
    case 'Start':               //调节开始日期
        resource.Start = value;
    break;
    case 'Finish':              //调节完成日期
        resource.Finish = value;
    break;
    case 'PercentComplete':     //调节完成百分比
        resource.PercentComplete = value;
    break;
    case 'Item':        //拖拽整个ganttItem, 这里用来移动任务整个日期
        value = e.Start;
        var time = resource.Finish.getTime() - resource.Start.getTime();
        resource.Start = e.Start;
        resource.Finish = new Date(resource.Start.getTime() + time);
    break;
    }
    
    dataGantt.endChange();
});

resourceclick资源点击事件

一般用于这样的场景:点击一个资源条形图,此资源的内容在一个资源表单内显示出来,可以查看和编辑。

resourcedblclick资源双击事件

一般用于这样的场景:双击一个资源条形图,弹出一个资源面板,用于查看和编辑资源。

了解本章教程内容,可以访问甘特图的事件示例