Web甘特图开发系列：(二) 创建Web甘特图

阅读更多

首先，在页面内引用相关js和css：

 

 

然后，创建甘特图对象：

var gantt = new CreateGantt();
gantt.render(document.body);

 

 

最后，使用Ajax加载任务列表数据，并设置给甘特图对象：

function loadList() {
    gantt.loading();
    $.ajax({
        url: "data/taskList.txt",
        cache: false,
        success: function (text) {
            var data = mini.decode(text);
            //列表转树形
            data = mini.arrayToTree(data, "children", "UID", "ParentTaskUID");
            gantt.loadTasks(data);
            gantt.unmask();            
        }
    });
}
loadList();

 

 

甘特图创建、显示完毕，效果图如下：

 

这里有两个注意点：

1）甘特图数据是使用ajax从服务端动态加载的。所以服务端可以只java、.net、php、asp等任意开发平台。

2）甘特图的JSON列表数据结构如下（注意UID和ParentTaskUID有父子关系）：

[{
    "UID": "1",
    "Name": "项目范围规划",
    "Duration": 8,
    "Start": "2007-01-01T00:00:00",
    "Finish": "2007-01-10T00:00:00",
    "PercentComplete": 0,
    "Summary": 1,
    "Critical": 0,
    "Milestone": 0,
    "PredecessorLink": [],        
    "ParentTaskUID": -1
},
{
    "UID": "2",
    "Name": "确定项目范围",
    "Duration": 1,
    "Start": "2007-01-01T00:00:00",
    "Finish": "2007-01-01T23:23:59",
    "PercentComplete": 0,
    "Summary": 0,
    "Critical": 0,
    "Milestone": 0,
    "PredecessorLink": [],
    "ParentTaskUID": "1"    
},
......
]

 

 

访问示例请点击这里 。