创建第一个jQuery Gantt Package甘特图具体步骤
jQuery Gantt Package是一个真正的跨平台，基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件，可满足您所有基于gantt的可视化需求。还带有ASP.NET WebControl和MVC扩展，可轻松集成到现有应用中。
点击下载jQuery Gantt Package试用版
您的第一个甘特图
让我们先创建一个新的项目目录，例如MyFirstGantt。
1) Gantt Widget源码JS文件
首先，你需要甘特小部件所需的JS源文件。这些文件在<安装路径>/Src文件夹中。只需将整个Src文件夹复制到上面的目录中即可。这个文件夹里还有其他依赖的css文件等。你可以删除 "Src/bin "文件夹，因为这个HTML样本不需要这个文件夹。
2) 实用程序JS文件样本
一些带有实用功能的JS文件，可以在网格中进行内联编辑等，在<安装路径>/Samples/脚本文件夹中。将整个 Scripts 目录复制到 MyFirstGantt 中。
3) JSON数据样本
创建一个SampleData.json文件，其中包含要在甘特图中显示的示例任务列表。
SampleData.json内容。
[{
“Name” : “Task 1”,
“ID” : 1,
“StartTime” : “2012-02-02T00:00:00Z”,
“Effort” : “8:00:00”,
“Description” : “Description of Task 1”
},
{
“Name” : “Task 2”,
“ID” : 2,
“PredecessorIndices” : “1”,
“StartTime” : “2012-02-03T00:00:00Z”,
“Effort” : “16:00:00”,
“Description” : “Description of Task 2”
},
{
“Name” : “Task 3”,
“ID” : 3,
“StartTime” : “2012-02-02T00:00:00Z”,
“Effort” : “1.12:30:00”,
“ProgressPercent” : 90,
“Description” : “Description of Task 3”
},
{
“Name” : “Child Task 1”,
“ID” : 4,
“IndentLevel” : 1,
“StartTime” : “2012-02-03T00:00:00Z”,
“Effort” : “8:00:00”,
“ProgressPercent” : 75,
“Description” : “Description of Task 3/Child Task 1”
},
{
“Name” : “Child Task 2”,
“ID” : 5,
“IndentLevel” : 1,
“PredecessorIndices” : “4+8”,
“Description” : “Description of Task 3/Child Task 2”
},
{
“Name” : “Grand Child Task 1”,
“ID” : 6,
“IndentLevel” : 2,
“StartTime” : “2012-02-03T00:00:00Z”,
“Effort” : “8:00:00”,
“Description” : “Description of Task 3/Child Task 1/Grand Child 1”
},
{
“Name” : “Grand Child Task 2”,
“ID” : 7, “IndentLevel” : 2,
“StartTime” : “2012-02-03T00:00:00Z”,
“Effort” : “16:00:00”,
“Description” : “Description of Task 3/Child Task 1/Grand Child 2”
},
{
“Name” : “Child Task 3”,
“ID” : 8,
“IndentLevel” : 1,
“StartTime” : “2012-02-02T00:00:00Z”,
“Effort” : “16:00:00”,
“Description” : “Description of Task 3/Child Task 3”
},
{
“Name” : “Task 4”,
“ID” : 9,
“StartTime” : “2012-02-02T00:00:00Z”,
“Effort” : “00:00:00”,
“ProgressPercent” : 60,
“Description” : “Description of Task 4”
},
{
“Name” : “Task 5”,
“ID” : 10,
“StartTime” : “2012-02-02T00:00:00Z”,
“Effort” : “8:00:00”,
“PredecessorIndices” : “3+8”,
“Description” : “Description of Task 5”
},
{
“Name” : “Child Task 1”,
“ID” : 11,
“IndentLevel” : 1,
“StartTime” : “2012-02-02T00:00:00Z”,
“Effort” : “16:00:00”,
“Description” : “Description of Task 5/Child Task 1”
},
{
“Name” : “Child Task 2”,
“ID” : 12,
“PredecessorIndices” : “11SS”,
“IndentLevel” : 1,
“StartTime” : “2012-02-02T00:00:00Z”,
“Effort” : “8:00:00”,
“Description” : “Description of Task 5/Child Task 2”
},
{
“Name” : “Task 6”,
“ID” : 13,
“StartTime” : “2012-02-02T00:00:00Z”,
“Effort” : “1.16:00:00”,
“Description” : “Description of Task 6”
},
{
“Name” : “Child Task 1”,
“ID” : 14,
“IndentLevel” : 1,
“StartTime” : “2012-02-02T00:00:00Z”,
“Effort” : “1.20:00:00”,
“Description” : “Description of Task 6/Child Task 1”
},
{
“Name” : “Grand Child Task 1”,
“ID” : 15,
“StartTime” : “2012-02-04T00:00:00Z”,
“Effort” : “1.00:00:00”,
“IndentLevel” : 2,
“Description” : “Description of Task 6/Child Task 2”
}]
4)包含甘特部件的HTML文件
在项目目录中创建一个新的HTML文件(MyFirstGantt)并引用以下源文件。请记住在下面最后一篇引用中链接到RadiantQ jQuery甘特的正确版本。
现在必须设置希望在GanttTable中显示的不同列。可以通过定义列对象的集合来实现，如下所示。
var columns = [
{
field: "Activity_M().ID_M()",
title: "ID",
iseditable: false,
width: 25
},
{
field: "Activity_M().ActivityName_M()",
title: "Activity Name",
width: 200,
editor: RadiantQ.Default.Template.ProjectGanttExpandableTextboxEditor(),
template: RadiantQ.Default.Template.ProjectGanttExpandableTextBlockTemplate()
},
{
field: "Activity_M().StartTime_M()",
title: "StartTime",
width: 150,
format: "MM/dd/yy",
editor: ""
},
{
field: "Activity_M().EndTime_M()",
title: "EndTime",
width: 150,
format: "MM/dd/yy",
cellalign: "center",
editor: ""
},
{
field: "Activity_M().Effort_M()",
title: "Effort",
format: "" /*to call the .toString()*/,
width: 100,
editor: ""
},
{
field: "Activity_M().ProgressPercent_M()",
title: "ProgressPercent",
width: 150,
editor: ""
},
{
field: "Activity_M().Assignments_M()",
title: "Resource",
iseditable: false,
template: ' ${ RadiantQ.Gantt.ValueConverters.ConverterUtils.GetResourcesText(data.Activity_M().Assignments_M(), false) } ',
width: 100
},
{
field: "Activity.PredecessorIndexString",
title: "PredecessorIndex",
isParentEditable: false,
template: "${data.PredecessorIndexString || '' }",
editor: "",
width: 150
}];
创建甘特
现在包含检索上面创建的json文件的代码，然后初始化GanttControl小部件，将其与加载的数据绑定在一起。
最后，看一看这个主题，展示如何清理项目中的Src文件夹以删除不必要的文件。
有关如何将更改持久化回数据库的示例，请浏览关于持久化更改的本主题。
相关产品介绍：
VARCHART XGantt：支持ActiveX、.Net等平台的C#甘特图控件
AnyGantt：构建复杂且内容丰富的甘特图的理想工具
phGantt Time Package：对任务和时间的分配管理的甘特图
dhtmlxGantt：交互式JavaScript / HTML5甘特图
APS是慧都科技15年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。