jQuery Gantt Package使用教程：创建RadiantQ jQuery甘特包
jQuery Gantt Package是一个真正的跨平台，基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件，可满足您所有基于gantt的可视化需求。还带有ASP.NET WebControl和MVC扩展，可轻松集成到现有应用中。
点击下载jQuery Gantt Package试用版
你的第一个甘特
让我们从创建一个新的项目目录开始，例如MyFirstGantt。
1)甘特部件源JS文件
首先，您需要Gantt小部件所需的JS源文件。这些文件在<安装路径>/Src文件夹中。只需将整个Src文件夹复制到上面的示例目录中。这个文件夹还有其他相关的css文件。您可以删除“Src/bin”文件夹，因为这个PHP示例不需要这样做。
然后将/PlatformSamples/PHPSamples/lib文件夹中的PHP库文件复制到sample目录中。
2)示例实用程序JS文件
在/Samples/Scripts文件夹中有一些带有实用函数的JS文件，可以在网格中进行内联编辑等。将整个脚本目录复制到MyFirstGantt中。3) JSON数据样本
创建一个SampleData。json文件，包含要在甘特图中显示的示例任务列表。
SampleData。json内容:
[{
“TName” : “Team1”,
“PStartTime” : “2012-04-02T00:00:00Z”,
“PEndTime” : “2012-04-18T00:00:00Z”,
“Resources” : [{
“RName” : “JohnH”,
“PStartTime” : “2012-04-04T00:00:00Z”,
“PEndTime” : “2012-04-15T00:00:00Z”,
“Tasks” : [{
“TaskName” : “Task 1”,
“StartTime” : “2012-04-03T00:00:00Z”,
“EndTime” : “2012-04-12T00:00:00Z”,
“Progress” : 20
}]
},
{
“RName” : “VictorG”,
“PStartTime” : “2012-04-06T00:00:00Z”,
“PEndTime” : “2012-04-18T00:00:00Z”,
“Tasks” : [{
“TaskName” : “Task 1”,
“StartTime” : “2012-04-03T00:00:00Z”,
“EndTime” : “2012-04-18T00:00:00Z”,
“Progress” : 20
}]
},
{
“RName” : “JasonS”,
“PStartTime” : “2012-04-06T00:00:00Z”,
“PEndTime” : “2012-04-18T00:00:00Z”,
“Tasks” : [{
“TaskName” : “Task 1”,
“StartTime” : “2012-04-06T00:00:00Z”,
“EndTime” : “2012-04-12T00:00:00Z”,
“Progress” : 20
},
{
“TaskName” : “Task 2”,
“StartTime” : “2012-04-12T00:00:00Z”,
“EndTime” : “2012-04-18T00:00:00Z”,
“Progress” : 70
}]
}]
},
{
“TName” : “Team2”,
“PStartTime” : “2012-04-10T00:00:00Z”,
“PEndTime” : “2012-04-20T00:00:00Z”,
“Resources” : [{
“RName” : “BalajiN”,
“PStartTime” : “2012-04-08T00:00:00Z”,
“PEndTime” : “2012-04-18T00:00:00Z”,
“Tasks” : [{
“TaskName” : “Task 1”,
“StartTime” : “2012-04-08T00:00:00Z”,
“EndTime” : “2012-04-20T00:00:00Z”,
“Progress” : 20
}]
},
{
“RName” : “LiM”,
“PStartTime” : “2012-04-12T00:00:00Z”,
“PEndTime” : “2012-04-18T00:00:00Z”,
“Tasks” : [{
“TaskName” : “Task 1”,
“StartTime” : “2012-04-08T00:00:00Z”,
“EndTime” : “2012-04-19T00:00:00Z”,
“Progress” : 90
}]
},
{
“RName” : “StacyH”,
“PStartTime” : “2012-04-05T00:00:00Z”,
“PEndTime” : “2012-04-20T00:00:00Z”,
“Tasks” : [{
“TaskName” : “Task 1”,
“StartTime” : “2012-04-06T00:00:00Z”,
“EndTime” : “2012-04-12T00:00:00Z”,
“Progress” : 20
}]
}]
}]
4)包含甘特小部件的PHP文件
在项目目录(MyFirstGantt)中创建一个新的PHP文件，并引用以下源文件。记得在下面的最后一篇参考中链接到RadiantQ jQuery甘特的正确版本。
>
require_once "lib/AutoLoad.php
创建甘特和甘特表
初始化GanttControl小部件和Gantt表，如下所示
//Name template and editor with expander cue.
Script
// to get the name from the bounded list
function nameConverter(flexyNodeData, value) {
var data;
// The grid calls this converter with flexyNodeData as a arg.
if (flexyNodeData.Data)
data = flexyNodeData.Data();
// The grid calls this converter with flexyNodeData as a datacontext.
else
data = flexyNodeData;
if (value == undefined) {
if (data[“TName”] != undefined)
return data[“TName”];
else if (data[“RName”] != undefined)
return data[“RName”];
else if (data[“TaskName”] != undefined)
return data[“TaskName”];
}
else {
if (data[“TName”] != undefined)
data[“TName”] = value;
else if (data[“RName”] != undefined)
data[“RName”] = value;
else if (data[“TaskName”] != undefined)
data[“TaskName”] = value;
}
return;
};
//to resolve the hierarchical data source.
function ResolverFunction(data) {
// If data is wrapped by KO, then data itself could be a function and so we pick the object from the function.
if (KaTeX parse error: Expected '}', got 'EOF' at end of input: … { if (.isFunction(data[“Resources”]))
return data"Resources";
else
return data[“Resources”];
}
else if (data[“RName”] != undefined) {
if (data[“Tasks”] != undefined) {
return null;
}
else
// Return an empty array to keep this a collapsible parent with no children. Return null to make this a leaf node.
return new Array();
}
return null;
}
你的MyFirstGantt目录的内容应该像这样:
Src
Scripts
json file
PHP file
在浏览器中打开FirstGanttSample.PHP，你应该会在浏览器中看到:
最后，看看这个主题，它展示了如何清理项目中的Src文件夹以删除不必要的文件。