jQuery Gantt Package使用教程：在Visual Studio中创建一个新的ASP.NET项目-控件新闻-慧都网

jQuery Gantt Package使用教程：在Visual Studio中创建一个新的ASP.NET项目

翻译|使用教程|编辑：杨鹏连|2020-11-09 11:55:08.167|阅读 258 次

概述：jQuery Gantt Package是跨平台、基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件。本文介绍了如何在Visual Studio中创建一个新的ASP.NET项目。

jQuery Gantt Package是一个真正的跨平台，基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件，可满足您所有基于gantt的可视化需求。还带有ASP.NET WebControl和MVC扩展，可轻松集成到现有应用中。

点击下载jQuery Gantt Package试用版

VS 2012 :FILE --> New --> Project --> Visual C# --> Web --> ASP.NET Web Forms Application，创建一个项目。
VS 2010 :FILE --> New --> Project --> Visual C# --> Web --> ASP.NET Web Application，创建一个项目。

1）甘特小部件源码JS文件

首先，你需要甘特小部件所需的JS源文件。这些文件在<安装路径>/Src文件夹中。把这个文件夹复制到上面的Project文件夹里面（虽然这个文件夹的大小非常大，但是它包含了所有Themes、locales等所需要的CSS等，并不是所有的CSS都会被加载到你的页面里面）。

继续删除这个Src文件夹里面的bin文件夹。

然后在项目的解决方案资源管理器中点击 "显示所有文件 "工具条项来显示这个新包含的Src文件夹，并将其包含在项目中。

2）实用JS文件样本

一些带有实用功能的JS文件在<安装路径>/Samples/脚本文件夹中。将上述安装路径中的Scripts文件夹的内容复制到项目文件夹中的Scripts文件夹中（当你创建一个新项目时，项目文件夹中会自动创建一个Scripts文件夹）。

然后按照上一步的步骤将新添加的脚本文件包含到您的项目中。

3) 创建一个样本数据源(JSON数据)

你通常会使用实体模型、ADO.NET等来从数据库中检索数据。但是，为了保持简单，我们将创建一个简单的 "任务 "列表，并将其从服务器返回给客户端。

创建一个名为TaskInfo的新类型来表示任务实例。在Solution Explorer中右击项目名称，然后添加-->新建项目-->类（称其为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; }
}

然后，添加一个新的通用处理程序到项目中；这将为客户端页面提供数据源。

要在visual studio中添加一个Generic handler，在Solution Explorer中右击项目名称，然后Add --> New Item --> Generic Handler，并创建一个新的实例，将其命名为，例如DataHandler.ashx。

在通用处理程序(DataHandler.ashx)中创建一个TaskInfos列表，使用JavaScriptSerializer或任何其他 "JSON序列化器 "将该列表转换为json数据，并将其添加到响应中。

public class DataHandler : IHttpHandler
{
    DateTime dt = DateTime.Today;
    public void ProcessRequest(HttpContext context)
    {
        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" }

        };

        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        context.Response.Write(serializer.Serialize(taskItems));
    }
public bool IsReusable
{
    get
    {
        return false;
    }
}   
}

4) 包含甘特图小部件的ASPX文件。

创建.aspx示例文件

在visual studio的SolutionExplorer中右击项目名称，然后添加-->新建项目-->Web Form(称之为WebForm1.aspx)。

在创建的aspx中包含以下命名空间。

<%@ Register Assembly="RadiantQ.Web.JQGantt" Namespace="RadiantQ.WebForms.JQGantt" TagPrefix="RQ" %>。

添加RadiantQ.Web.JQGantt.dll到你的项目参考中，你可以在这里找到dll。<安装文件夹>/Src/\bin/DotNET4MVC4/RadiantQ.Web.JQGantt.dll。

在aspx的<head>标签中引用以下源文件。记得在下面最后一行引用中链接到正确版本的RadiantQ jQuery Gantt。

<head runat="server">
    <title></title>
    <link id="themeChooser" href="<%= Page.ResolveClientUrl("~/Src/Styles/jQuery-ui-themes/smoothness/jquery-ui.css") %>" rel="stylesheet" />
    <link id="default" href="<%= Page.ResolveClientUrl("~/Src/Styles/radiantq.gantt.default.css") %>" rel="stylesheet" />
    <link href="<%= Page.ResolveClientUrl("~/Src/Styles/VW.Grid.css") %>" rel="stylesheet" />
    <script src="<%= Page.ResolveClientUrl("~/Src/Scripts/jquery-1.11.2.min.js") %>" type="text/javascript"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js") %>"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/jquery.layout-latest.min.js") %>"></script>
    <script src="<%= Page.ResolveClientUrl("~/Src/Scripts/Utils/date.js") %>" type="text/javascript"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/ResourceStrings/en-US.js") %>"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/VW.Grid.1.min.js") %>"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/RadiantQ-jQuery.gantt.5.0.trial.min.js") %>"></script>
    <script src="<%= Page.ResolveClientUrl("~/Src/Scripts/RQGantt_Init.min.js")%>" type="text/javascript"></script>
</head>

创建甘特图

现在包含代码来检索上面创建的json文件，然后初始化GanttControl小组件，将其与加载的数据绑定。

在WebForm1.aspx中，在<body>中的默认<form>标签中，添加以下标签。

<body>
    <form id="form1" runat="server">
        <RQ:GanttControl ID="gantt" DataSourceUrl="DataHandler.ashx" Height="500px" runat="server"/>
         <div>
         </div>
    </form>
</body>

初始化甘特图
现在，你必须设置你想在GanttTable中显示的不同列，你可以通过在GanttControl的GanttTableOptions属性中定义列来实现。你可以通过在GanttControl的GanttTableOptions属性中定义列来实现。

    <RQ:GanttControl ID="gantt" DataSourceUrl="DataHandler.ashx" Height="500px" runat="server">
  <GanttTableOptions>
                <Columns>
                    <GanttBase:Column field="Activity.ID" width="25" title="ID" iseditable="false"></GanttBase:Column>

                    <GanttBase:Column field="Activity.ActivityName" width="200" title="Activity Name" clientTemplate="projectGanttNameTemplate" clientEditorTemplate="projectGanttNameEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.StartTime" width="100" title="StartTime" format="MM/dd/yy" clientEditorTemplate="startTimeEditor"></GanttBase:Column>                                                                                                   

                    <GanttBase:Column field="Activity.EndTime" width="100" title="EndTime" format="MM/dd/yy" clientEditorTemplate="endTimeEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.Effort" width="100" title="Effort" format="" clientEditorTemplate="effortEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.ProgressPercent" width="100" title="ProgressPercent" clientEditorTemplate="progressEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.Assignments" width="100" title="Resource" iseditable="false" clientTemplate="resourceTemplate"></GanttBase:Column>

                    <GanttBase:Column field="Activity.PredecessorIndexString" width="100" title="Predecessor Index" clientEditorTemplate="predecessorEditor" clientTemplate="predecessorTemplate" isParentEditable="false"></GanttBase:Column>
                </Columns>
            </GanttTableOptions>    
    </RQ:GanttControl>
   <%-- Column Template--%> 
<script id="projectGanttNameTemplate" type="text/x-jquery-tmpl">
         <div class="rq-grid-expand-indentWidth" style="height: 1px; width: ${data.IndentWidth_M()}px"></div>
         <div style="width: 12px; display: ${data.IsParent_M() ? "block" :"none" }" class="arrowContainer">
         <div onclick="ExpanderOnclick(this,event)" id="Div2" class="${ data.IsExpanded_M() ? " rq-grid-expand-arrow rq-grid-collapse-arrow": "rq-grid-expand-arrow"} rq-Ignore-click"></div>
         </div>
         <div class="rq-grid-expander-text">${data.Activity.ActivityName}</div>
    </script>  
    <script id="predecessorTemplate" type="text/x-jquery-tmpl">
        <div>${data.PredecessorIndexString_M() || '' }</div>
    </script>
<%--Column Editors  --%>
    <script id="startTimeEditor" type="text/x-jquery-tmpl">
        <input data-bind='ActivityTimeBinder: Activity_M().StartTime_M' />
    </script>
    <script id="endTimeEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: Activity_M().EndTime_M' data-getvaluename='getDate' data-setvaluename='setDate' data-valueupdate='onBlur' data-role="DateTimePicker" />
    </script>
    <script id="effortEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: Activity_M().Effort_M' data-role="DurationPicker" />
    </script> 
    <script id="progressEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: Activity_M().ProgressPercent_M' data-role="spinner" data-options='{"min":0, "max": 100}' />
    </script> 
    <script id="predecessorEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: PredecessorIndexString' />
    </script>

gantt 现在已经完全设置好，可以显示从 ashx 处理程序返回的任务。

将 WebForm1.aspx 设为 "起始页"。您可以通过在解决方案资源管理器中右键单击该文件并选择 "设置为起始页 "来实现。

以下是最终的甘特图：