首页 / JQUERY / 跨平台jQuery Gantt Package在Visual Studio中创建一个新的ASP.NET项目

跨平台jQuery Gantt Package在Visual Studio中创建一个新的ASP.NET项目

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了跨平台jQuery Gantt Package在Visual Studio中创建一个新的ASP.NET项目，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9963字，纯文字阅读大概需要15分钟。

内容图文

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文件夹，并将其包含在项目中。

 

跨平台jQuery Gantt Package在Visual Studio中创建一个新的ASP.NET项目 - 文章图片

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 设为 "起始页"。您可以通过在解决方案资源管理器中右键单击该文件并选择 "设置为起始页 "来实现。

以下是最终的甘特图：

跨平台jQuery Gantt Package在Visual Studio中创建一个新的ASP.NET项目 - 文章图片

 

相关产品介绍：

VARCHART XGantt：支持ActiveX、.Net等平台的C#甘特图控件
AnyGantt：构建复杂且内容丰富的甘特图的理想工具
phGantt Time Package：对任务和时间的分配管理的甘特图
dhtmlxGantt：交互式JavaScript / HTML5甘特图

APS是慧都科技15年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。>>查看APS详细信息

 本文章转载自【慧都科技】evget欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果

 

内容总结

以上是互联网集市为您收集整理的跨平台jQuery Gantt Package在Visual Studio中创建一个新的ASP.NET项目全部内容，希望文章能够帮你解决跨平台jQuery Gantt Package在Visual Studio中创建一个新的ASP.NET项目所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/622002.html

来源：【匿名】