jQuery Gantt Package是一個(gè)真正的跨平臺(tái)，基于HTML5 / jQuery的本地實(shí)現(xiàn)，具有2個(gè)不同的gantt小部件，可滿足您所有基于gantt的可視化需求。還帶有ASP.NET WebControl和MVC擴(kuò)展，可輕松集成到現(xiàn)有應(yīng)用中。

點(diǎn)擊下載jQuery Gantt Package試用版

創(chuàng)建一個(gè)新的ASP.Visual Studio中的asp.net MVC項(xiàng)目:

新建—項(xiàng)目—項(xiàng)目選擇Internet應(yīng)用程序(選擇Razor Engine)

1)甘特Widget源JS文件

首先，您需要Gantt小部件所需的JS源文件。這些文件位于<install path="">/Src文件夾中。</install>復(fù)制這個(gè)文件夾到上面的項(xiàng)目文件夾(雖然這個(gè)文件夾很大，但它包含了所有主題、地區(qū)所需的CSS等等，并不是所有的都將被加載到你的頁面中)。
繼續(xù)并刪除這個(gè)Src文件夾中的bin文件夾。

然后在項(xiàng)目的解決方案資源管理器中單擊“顯示所有文件”工具欄項(xiàng)，以顯示這個(gè)新包含的Src文件夾，并將其包含在項(xiàng)目中。

2)示例工具JS文件

一些帶有實(shí)用函數(shù)的JS文件位于<install path="">/Samples/Scripts文件夾中。</install>從上面的安裝路徑復(fù)制Scripts文件夾的內(nèi)容到您的項(xiàng)目文件夾中的Scripts文件夾中(當(dāng)您創(chuàng)建一個(gè)新的項(xiàng)目時(shí)，腳本文件夾將自動(dòng)在您的項(xiàng)目文件夾中創(chuàng)建)。
然后，按照與上一步相同的過程將新添加的腳本文件包含到項(xiàng)目中。

3)創(chuàng)建一個(gè)示例數(shù)據(jù)源(JSON數(shù)據(jù))

通常使用實(shí)體模型ADO。從數(shù)據(jù)庫(kù)中檢索數(shù)據(jù)。但是，為了簡(jiǎn)單起見，我們將創(chuàng)建一個(gè)簡(jiǎn)單的“任務(wù)”列表，并將其從服務(wù)器返回給客戶機(jī)。

創(chuàng)建一個(gè)名為TaskInfo的新類型來表示任務(wù)實(shí)例。在解決方案資源管理器中右鍵單擊項(xiàng)目名稱，然后添加——>新項(xiàng)目——>類(稱為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; }
}

準(zhǔn)備一個(gè)上述TaskInfo實(shí)例的示例列表，它表示項(xiàng)目中的任務(wù)。此方法必須在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);
}
}

添加RadiantQ.Web.JQGantt.dll到您的項(xiàng)目參考，您可以在這里找到dll: <安裝文件夾>\Src\bin\DotNET4MVC4\RadiantQ.Web.JQGantt.dll。(或使用MVC3等效)

在你_Layout.cshtml，包括以下腳本和css引用所需的甘特:

記住在下面倒數(shù)第一行中鏈接到j(luò)query甘特包的正確版本。

   <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>

@Scripts.Render("~/bundles/jquery")

最后，在Web中包含以下名稱空間。在現(xiàn)有系統(tǒng)中配置。Web標(biāo)簽如下

<configuration>
 <System.Web>
  <pages>
      <namespaces>        
        <add namespace="RadiantQMVC" />
        <add namespace="RadiantQ.Web.JQGantt" />
        <add namespace="RadiantQ.Web.JQGantt.Common" />
      </namespaces>
   </pages>
 </System.Web>
</configuration>

創(chuàng)建.cshtml示例文件

在visual studio中，右鍵單擊views——>主文件夾，并添加——&gt; View(稱為view1.cshtml)

并在cshtm頁面中包含以下名稱空間。

@using RadiantQMVC
@using RadiantQ.Web.JQGantt;
@using RadiantQ.Web.JQGantt.Common

現(xiàn)在包含檢索上面創(chuàng)建的json文件的代碼，然后初始化GanttControl小部件，將其與加載的數(shù)據(jù)綁定在一起。
(可以將其添加到新創(chuàng)建的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>

現(xiàn)在必須設(shè)置希望在GanttTable中顯示的不同列。您可以通過定義GanttTableOptions來做到這一點(diǎn)，如下所示。
(僅將下面的GanttTableOptions相關(guān)代碼復(fù)制到已經(jīng)復(fù)制的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")
        }
})

<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>

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

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

相關(guān)產(chǎn)品介紹：

VARCHART XGantt：支持ActiveX、.Net等平臺(tái)的C#甘特圖控件
AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
phGantt Time Package：對(duì)任務(wù)和時(shí)間的分配管理的甘特圖
dhtmlxGantt：交互式JavaScript / HTML5甘特圖

APS是慧都科技15年行業(yè)經(jīng)驗(yàn)以及技術(shù)沉淀之作，通過連接企業(yè)接單、采購(gòu)、制造、倉(cāng)儲(chǔ)物流等整個(gè)供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。>>查看APS詳細(xì)信息