jQuery Gantt Package是一个真正的跨平台，基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件，可满足您所有基于gantt的可视化需求。还带有ASP.NET WebControl和MVC扩展，可轻松集成到现有应用中。
jQuery Gantt Package试用版
在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文件样本
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"" />"" }
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！