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 設為 "起始頁"。您可以通過在解決方案資源管理器中右鍵單擊該文件并選擇 "設置為起始頁 "來實現。
以下是最終的甘特圖：
相關產品介紹：
VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構建復雜且內容豐富的甘特圖的理想工具
phGantt Time Package：對任務和時間的分配管理的甘特圖
dhtmlxGantt：交互式JavaScript / HTML5甘特圖
APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。>>查看APS詳細信息
想要購買甘特圖正版授權，或了解更多產品信息請點擊【咨詢在線客服】
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
7次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線