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

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

翻译|使用教程|编辑：杨鹏连|2020-12-07 11:10:11.807|阅读 231 次

概述：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: <安装文件夹>\Src\bin\DotNET4MVC4\RadiantQ.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\"  />"
                        },
                        new Column(){
                            field= "Activity.EndTime",
                            title= "EndTime",
                            width= 150,
                            format= "MM/dd/yy",
                            cellalign= "center",
                            editor= "<input data-bind='value:Activity.EndTime' data-getvalueName='getDate' data-setvaluename='setDate'  data-valueUpdate='onClose'  data-role=\"DateTimePicker\"  />"
                        },
                        new Column(){
                               field= "Activity.Effort",
                               title= "Effort",
                               format= "" /*to call the .toString()*/,
                               width= 100,
                               editor= "<input data-bind='value:Activity.Effort' style='height:18px'  data-role=\"DurationPicker\"  />"
                        },
                        new Column(){
                            field= "Activity.ProgressPercent",
                            title="ProgressPercent",
                            width= 100,
                            editor= "<input style='height:18px'  data-bind='value:Activity.ProgressPercent' data-role=\"spinner\" data-options='{\"min\":0, \"max\": 100}' />"
                        },
                        new Column(){
                            field= "Activity.Assignments",
                            title= "Resource",
                           iseditable=false,
                            template= "<div>${RadiantQ.Gantt.ValueConverters.ConverterUtils.GetResourcesText(data.Activity_M().Assignments_M(), false)}</div>",
                            editor= "<input data-bind='ResourcePickerBinder:Activity.Assignments'  />",
                            width= 200
                        },
                        new Column(){
                          field= "Activity.PredecessorIndexString",
                          title= "PredecessorIndices",
                          template= "<div>${data.PredecessorIndexString || '' }</div>",
                          editor= "<input data-bind='value:PredecessorIndexString'  />",
                          width= 150                
                        }
                       }
                   },

            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")
        }
})

最后，定义Name列定义中使用的以下模板。

<script id="projectGanttNameTemplate" type="text/x-jquery-tmpl">
<div class="rq-grid-expand-indentWidth" style="height: 1px; width: ${data.IndentWidth}px"></div>
    <div style="width: 12px; display: ${data.IsParent ? "block" :"none" }" class="arrowContainer">
          <div onclick="ExpanderOnclick(this,event)" id="arrow" class="${ data.IsExpanded ? " 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="projectGanttNameEditor" 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="arrow" 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"><input data-bind='value: Activity_M().ActivityName_M' /></div>
</script>

甘特现在已经完全设置好，可以显示从控制器返回的任务。
在Homecontroller中创建一个ActionResult，它将以视图的形式返回您的页面

public ActionResult View1()
{          
    return View("View1");
}

在App_Start/ routeconfig cs中将路由操作更改为“View1”(使其成为默认视图)

routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}",
    defaults: new { controller = "Home", action = "View1", id = UrlParameter.Optional }
);

这是合成甘特: