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等等，并不是所有的都將被加載到你的頁(yè)面中)。
繼續(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)建)。
然后，按照與上一步相同的過(guò)程將新添加的腳本文件包含到項(xiàng)目中。
3)創(chuàng)建一個(gè)示例數(shù)據(jù)源(JSON數(shù)據(jù))
通常使用實(shí)體模型ADO。從數(shù)據(jù)庫(kù)中檢索數(shù)據(jù)。但是，為了簡(jiǎn)單起見(jiàn)，我們將創(chuàng)建一個(gè)簡(jiǎn)單的“任務(wù)”列表，并將其從服務(wù)器返回給客戶機(jī)。
創(chuàng)建一個(gè)名為T(mén)askInfo的新類(lèi)型來(lái)表示任務(wù)實(shí)例。在解決方案資源管理器中右鍵單擊項(xiàng)目名稱，然后添加——>新項(xiàng)目——>類(lèi)(稱為T(mén)askInfo.cs)并定義如下類(lèi)。
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; }
}
創(chuàng)建一個(gè)示例數(shù)據(jù)源
準(zhǔn)備一個(gè)上述TaskInfo實(shí)例的示例列表，它表示項(xiàng)目中的任務(wù)。此方法必須在HomeController類(lèi)中(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到您的項(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>
還要確保在_Layout中沒(méi)有包含jQuery文件。cshtml(因?yàn)槲覀冊(cè)谏厦嬉昧怂?。默認(rèn)情況下，jQuery文件在_Layout.cshtml中包含如下的行，
@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>
5)包含甘特部件的CSHTML文件
創(chuàng)建.cshtml示例文件
在visual studio中，右鍵單擊views——>主文件夾，并添加——> View(稱為view1.cshtml)
并在cshtm頁(yè)面中包含以下名稱空間。
@using RadiantQMVC
@using RadiantQ.Web.JQGantt;
@using RadiantQ.Web.JQGantt.Common
創(chuàng)建GanttControl
現(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中顯示的不同列。您可以通過(guò)定義GanttTableOptions來(lái)做到這一點(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")
}
})
最后，定義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>
甘特現(xiàn)在已經(jīng)完全設(shè)置好，可以顯示從控制器返回的任務(wù)。
在Homecontroller中創(chuàng)建一個(gè)ActionResult，它將以視圖的形式返回您的頁(yè)面
public ActionResult View1()
{
return View("View1");
}
在App_Start/ routeconfig cs中將路由操作更改為“View1”(使其成為默認(rèn)視圖)
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "View1", id = UrlParameter.Optional }
);
這是合成甘特:
最后，看一看這個(gè)主題，展示如何清理項(xiàng)目中的Src文件夾以刪除不必要的文件。
有關(guān)如何將更改持久化回?cái)?shù)據(jù)庫(kù)的示例，請(qǐng)瀏覽關(guān)于持久化更改的本主題。
相關(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ù)沉淀之作，通過(guò)連接企業(yè)接單、采購(gòu)、制造、倉(cāng)儲(chǔ)物流等整個(gè)供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。>>查看APS詳細(xì)信息
想要購(gòu)買(mǎi)甘特圖正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊【咨詢?cè)诰€客服】
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：
金喜正規(guī)買(mǎi)球 
25次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買(mǎi)球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線