Query Gantt Package是跨平台、基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件。本文介绍了 如何创建一个新的ASP.Visual Studio中的asp.net MVC项目。
jQuery Gantt Package是一个真正的跨平台，基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件，可满足您所有基于gantt的可视化需求。还带有ASP.NET WebControl和MVC扩展，可轻松集成到现有应用中。
jQuery Gantt Package试用版
创建一个新的ASP.Visual Studio中的asp.net MVC项目:
新建—项目—项目选择Internet应用程序(选择Razor Engine)
1)甘特Widget源JS文件
首先，您需要Gantt小部件所需的JS源文件。这些文件位于<install path=””>/Src文件夹中。</install>复制这个文件夹到上面的项目文件夹(虽然这个文件夹很大，但它包含了所有主题、地区所需的CSS等等，并不是所有的都将被加载到你的页面中)。
继续并删除这个Src文件夹中的bin文件夹。
然后在项目的解决方案资源管理器中单击“显示所有文件”工具栏项，以显示这个新包含的Src文件夹，并将其包含在项目中。
2)示例工具JS文件
一些带有实用函数的JS文件位于<install path=””>/Samples/Scripts文件夹中。</install>从上面的安装路径复制Scripts文件夹的内容到您的项目文件夹中的Scripts文件夹中(当您创建一个新的项目时，脚本文件夹将自动在您的项目文件夹中创建)。
然后，按照与上一步相同的过程将新添加的脚本文件包含到项目中。
3)创建一个示例数据源(JSON数据)
通常使用实体模型ADO。从数据库中检索数据。但是，为了简单起见，我们将创建一个简单的“任务”列表，并将其从服务器返回给客户机。
创建一个名为TaskInfo的新类型来表示任务实例。在解决方案资源管理器中右键单击项目名称，然后添加——>新项目——>类(称为TaskInfo.cs)并定义如下类。
public class TaskInfo{ public string Name { get; set; } public int IndentLevel { get; set; } public DateTime StartTime { get; set; } public string Effort { get; set; } public double ProgressPercent { get; set; } public string Resources { get; set; } public int ID { get; set; } public string PredecessorIndices { get; set; } public int SortOrder { get; set; } public string Description { get; set; } public object Tag { get; set; } public int Priority { get; set; } public DateTime PlannedStartTime { get; set; } public DateTime PlannedEndTime { get; set; } public double Cost { get; set; } public DateTime EndTime { get; set; }}
创建一个示例数据源
准备一个上述TaskInfo实例的示例列表，它表示项目中的任务。此方法必须在HomeController类中(Controllers/HomeController.cs)。
public class HomeController : Controller{public ActionResult GetProjectGanttItemsource(){ DateTime dt = DateTime.Today; List<TaskInfo> taskItems = new List<TaskInfo> { new TaskInfo { Name = "Task 1", ID = 1, StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 1" }, new TaskInfo { Name = "Child Task 1", ID = 2,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), Description = "Description of Task 2" }, new TaskInfo { Name = "Task 3", ID = 3, StartTime =dt, Effort=TimeSpan.FromDays(4).ToString(), Description = "Description of Task 3" }, new TaskInfo { Name = "Child Task 1", ID = 4,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(3).ToString(), Description = "Description of Task 4" }, new TaskInfo { Name = "Child Task 2", ID = 5, IndentLevel=2, StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 5" }, new TaskInfo { Name = "Task 6", ID = 6, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), Description = "Description of Task 6" }, new TaskInfo { Name = "Task 7", ID = 7, StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 7" }, new TaskInfo { Name = "Child Task 1", ID = 8,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), PredecessorIndices="6+2" } }; return this.Json(taskItems, JsonRequestBehavior.AllowGet);}}
4) RadiantQ程序集和脚本引用
添加RadiantQ.Web.JQGantt.dll到您的项目参考，您可以在这里找到dll: <安装文件夹>SrcbinDotNET4MVC4RadiantQ.Web.JQGantt.dll。(或使用MVC3等效)
在你_Layout.cshtml，包括以下脚本和css引用所需的甘特:
记住在下面倒数第一行中链接到jquery甘特包的正确版本。
<script src="~/Src/Scripts/jquery-1.11.2.min.js"></script> <link id="themeChooser" href="~/Src/Styles/jQuery-ui-themes/smoothness/jquery-ui.css" rel="stylesheet" /> <link id="default" href="~/Src/Styles/radiantq.gantt.default.css" rel="stylesheet" /> <link id="gridCss" href="~/Src/Styles/VW.Grid.css" rel="stylesheet" /> <script src="~/Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js"></script> <script type="text/javascript" src="~/Src/Scripts/jquery.layout-latest.min.js"></script> <script src="~/Src/Scripts/Utils/date.js"></script> <script src="~/Src/ResourceStrings/en-US.js"></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> <script src='~/Src/Scripts/RQGantt_Init.min.js' type='text/javascript'></script>
还要确保在_Layout中没有包含jQuery文件。cshtml(因为我们在上面引用了它)。默认情况下，jQuery文件在_Layout.cshtml中包含如下的行，
@Scripts.Render(“~/bundles/jquery”)
最后，在Web中包含以下名称空间。在现有系统中配置。Web标签如下
<configuration> <System.Web> <pages> <namespaces> <add namespace="RadiantQMVC" /> <add namespace="RadiantQ.Web.JQGantt" /> <add namespace="RadiantQ.Web.JQGantt.Common" /> </namespaces> </pages> </System.Web></configuration>
5)包含甘特部件的CSHTML文件
创建.cshtml示例文件
在visual studio中，右键单击views——>主文件夹，并添加——> View(称为view1.cshtml)
并在cshtm页面中包含以下名称空间。
@using RadiantQMVC@using RadiantQ.Web.JQGantt;@using RadiantQ.Web.JQGantt.Common
创建GanttControl
现在包含检索上面创建的json文件的代码，然后初始化GanttControl小部件，将其与加载的数据绑定在一起。
(可以将其添加到新创建的cshtm文件的底部)
@Html.JQProjectGantt( new JQProjectGanttSettings() { ControlId = "gantt_container", DataSourceUrl = new Uri("/Home/GetProjectGanttItemsource", UriKind.RelativeOrAbsolute), Options = new ProjectGanttOptions() { IDBinding= new Binding("ID"), NameBinding = new Binding("Name"), IndentLevelBinding = new Binding("IndentLevel"), StartTimeBinding = new Binding("StartTime"), EffortBinding = new Binding("Effort"), PredecessorIndicesBinding= new Binding("PredecessorIndices"), ProgressPercentBinding= new Binding("ProgressPercent"), DescriptionBinding= new Binding("Description") }}) <!-- Div that will be transformed into the gantt widget above.--> <div id="gantt_container" style="height:450px;"> </div>
正在初始化甘特表
现在必须设置希望在GanttTable中显示的不同列。您可以通过定义GanttTableOptions来做到这一点，如下所示。
(仅将下面的GanttTableOptions相关代码复制到已经复制的JQProjectGanttSettings代码中)。
@Html.JQProjectGantt( new JQProjectGanttSettings() { ControlId = "gantt_container", DataSourceUrl = new Uri("/Home/GetProjectGanttItemsource", UriKind.RelativeOrAbsolute), Options = new ProjectGanttOptions() { GanttTableOptions = new GanttTableOptions() { Columns = new Columns(){ new Column(){ field= "Activity.ID", title= "ID", width= 40, iseditable=false }, new Column(){ field= "Activity.ActivityName", title= "Name", width= 200, clientEditorTemplate= "projectGanttNameEditor", clientTemplate = "projectGanttNameTemplate" }, new Column(){ field= "Activity.StartTime", title= "StartTime", width= 150, format= "MM/dd/yy", cellalign= "center", editor= "<input data-bind='ActivityTimeBinder:Activity.StartTime' data-getvalueName='getDate' data-setvaluename='setDate' data-valueUpdate='onClose' data-role="DateTimePicker"" />"" }
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！