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 }
);
這是合成甘特:
最后，看一看這個主題，展示如何清理項目中的Src文件夾以刪除不必要的文件。
有關如何將更改持久化回數據庫的示例，請瀏覽關于持久化更改的本主題。
相關產品介紹：
VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構建復雜且內容豐富的甘特圖的理想工具
phGantt Time Package：對任務和時間的分配管理的甘特圖
dhtmlxGantt：交互式JavaScript / HTML5甘特圖
APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。>>查看APS詳細信息
想要購買甘特圖正版授權，或了解更多產品信息請點擊【咨詢在線客服】
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
25次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線