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

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

<script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../scripts/miniui/miniui.js" type="text/javascript"></script>    
<script src="../scripts/miniui/locale/zh_CN.js" type="text/javascript"></script>

<link href="../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" /><link href="../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />    
<link href="../scripts/miniui/themes/icons.css" rel="stylesheet" type="text/css" />

<script src="../scripts/plusgantt/GanttMenu.js" type="text/javascript"></script>
<script src="../scripts/plusgantt/GanttSchedule.js" type="text/javascript"></script>
<script src="../scripts/plusgantt/GanttService.js" type="text/javascript"></script>

然后，创建甘特图对象：

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"    
},
......
]

 

访问示例请点击这里。