jQuery Gantt Package 是一个真正的跨平台，基于 HTML5 / jQuery 的本地实现，具备 2 个不同的 gantt 小部件，可满足您所有基于 gantt 的可视化需要。还带有 ASP.NET WebControl 和 MVC 扩大，可轻松集成到现有利用中。
在 Visual Studio 中创立一个新的 ASP.NET 我的项目：
VS 2012 :FILE –> New –> Project –> Installed –> Templates –> Other Language –> TypeScript，创立一个我的项目。
甘特包包含必要的甘特 TypeScript 接口，以帮忙你开发你的 Web 应用程序，就像其余类型平安语言一样，编译时查看。
1) Gantt Widget 源码 JS 文件
首先，你须要甘特小部件所需的 JS 源文件。这些文件在 < 装置门路 >/Src 文件夹中。把这个文件夹复制到下面的 Project 文件夹外面（尽管这个文件夹的大小十分大，然而它蕴含了所有 Themes、locales 等所须要的 CSS 等，并不是所有的 CSS 都会被加载到你的页面外面）。
持续删除这个 Src 文件夹外面的 bin 文件夹。
而后在我的项目的解决方案资源管理器中点击 “ 显示所有文件 “ 工具条项来显示这个新蕴含的 Src 文件夹，并将其蕴含在我的项目中。
**
2）实用 JS 文件样本
** 一些带有实用功能的 JS 文件，能够在网格中进行内嵌编辑等，这些文件在 <install path>/Samples/Scripts 文件夹中。将上述装置门路中的 Scripts 文件夹的内容复制到你的我的项目文件夹中的 Scripts 文件夹中（当你创立一个新我的项目时，我的项目文件夹中会主动创立一个 Scripts 文件夹）。
而后依照上一步的步骤将新增加的脚本文件蕴含到你的我的项目中。
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 文件，并援用以下源文件。记得在上面最初一个援用中链接到正确版本的 RadiantQ jQuery Gantt。
<head>
<title></title>
<link href="Src/Styles/jQuery-ui-themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="Src/Styles/radiantq.gantt.default.css" rel="stylesheet" />
<link href="Src/Styles/VW.Grid.css" rel="stylesheet" />
<script src="Src/Scripts/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Src/Scripts/jquery.layout-latest.min.js"></script>
<script src="Src/Scripts/Utils/date.js" type="text/javascript"></script>
<script src="Src/ResourceStrings/en-US.js" type="text/javascript"></script>
<script src='Src/Scripts/VW.Grid.1.min.js' type='text/javascript'></script>
<script src='Src/Scripts/RadiantQ-jQuery.gantt.5.0.trial.min.js' type='text/javascript'></script></head>
<body>
<div id="pagecontent" style="height: 600px;">
<div id="gantt_container" style="height: 100%;">
</div>
</div></body>
5）TypeScript 文件
在你的我的项目中，在该 HTML 旁边增加一个新的 TypeScript 文件 (myApp.ts)，并援用 html 中的后果 js。
<head>
other script fils.
<script src=myApp.js type='text/javascript'></script></head>
6）在 TypeScript 文件外面创立 Ganttcontrol 小部件。
$.ajax({
type: "GET",
dataType: 'json',
url: 'GanttControlSkeleton.json',
converters:
{"text json": function (data) {//console.log(data);
return $.parseJSON(data, true
/*converts date strings to date objects*/
, true
/*converts ISO dates to local dates*/
);
}
},
success: function (data) {loadGantt(data);
}});
function loadGantt(datasourcejson) {
var columns = [
{field: "Activity_M().ID_M()",
title: "ID",
width: 20
},
{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: 100,
format: "MM/dd/yy",
cellalign: "center",
editor: "<input data-bind=' ValueBinder.ActivityTimeBinder:Activity_M().StartTime_M'/>"},
{field: "Activity_M().EndTime_M()",
title: "EndTime",
width: 100,
format: "MM/dd/yy",
cellalign: "center",
editor: "<input data-bind='value:Activity_M().EndTime_M'data-getvalueName='getDate'data-setvaluename='setDate'data-valueUpdate='onBlur'data-role="DateTimePicker"/>"},
{field: "Activity_M().Effort_M()",
title: "Effort",
format: "" /*to call the .toString()*/,
width: 100,
editor: "<input data-bind='value:Activity_M().Effort_M'style='height:18px'data-role="DurationPicker"/>"},
{field: "Activity_M().ProgressPercent_M()",
title: "ProgressPercent",
width: 100,
editor: "<input style='height:18px'data-bind='value:Activity_M().ProgressPercent_M'data-role="spinner"data-options='{"min":0, "max": 100}'/>"
},
{field: "Activity_M().Assignments_M()",
title: "Assignments",
iseditable: false,
template: '<div> ${RadiantQ.Gantt.ValueConverters.ConverterUtils.GetResourcesText(data.Activity_M().Assignments_M(), false) } </div>',
width: 200
},
{field: "Activity_M().PredecessorIndexString_M()",
title: "PredecessorIndex",
template: "<div>${data.PredecessorIndexString ||''}</div>",
editor: "<input data-bind='value:PredecessorIndexString'/>",
width: 150
}
];
var ganttControl: GanttControl;
var anchorTime = datasourcejson[0].StartTime["clone"]();
var $gantt_container = $('#gantt_container');
$gantt_container.GanttControl({
ProjectStartDate: anchorTime,
DataSource: datasourcejson,
GanttTableOptions: {columns: columns},
IDBinding: new RadiantQ.BindingOptions("ID"),
NameBinding: new RadiantQ.BindingOptions("Name"),
IndentLevelBinding: new RadiantQ.BindingOptions("IndentLevel"),
StartTimeBinding: new RadiantQ.BindingOptions("StartTime"),
EffortBinding: new RadiantQ.BindingOptions("Effort"),
PredecessorIndicesBinding: new RadiantQ.BindingOptions("PredecessorIndices"),
ProgressPercentBinding: new RadiantQ.BindingOptions("ProgressPercent"),
DescriptionBinding: new RadiantQ.BindingOptions("Description"),
TimeRangeHighlightBehavior: RadiantQ.Gantt.TimeRangeHighlightBehavior.HighlightInChartOnHeaderMouseHover,
GanttChartTemplateApplied: function (sender , args) {ganttControl = <GanttControl>$gantt_container.data("GanttControl");
var $ganttChart = args.element;
$ganttChart.GanttChart({AnchorTime: anchorTime});
}
});};
最初，看看这个主题，通知你如何清理我的项目中的 Src 文件夹，删除不必要的文件。