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試用版
您的第一個(gè)甘特圖
讓我們先創(chuàng)建一個(gè)新的項(xiàng)目目錄，例如MyFirstGantt。
1) Gantt Widget源碼JS文件
首先，你需要甘特小部件所需的JS源文件。這些文件在<安裝路徑>/Src文件夾中。只需將整個(gè)Src文件夾復(fù)制到上面的目錄中即可。這個(gè)文件夾里還有其他依賴的css文件等。你可以刪除 "Src/bin "文件夾，因?yàn)檫@個(gè)HTML樣本不需要這個(gè)文件夾。
2) 實(shí)用程序JS文件樣本
一些帶有實(shí)用功能的JS文件，可以在網(wǎng)格中進(jìn)行內(nèi)聯(lián)編輯等，在<安裝路徑>/Samples/腳本文件夾中。將整個(gè) Scripts 目錄復(fù)制到 MyFirstGantt 中。
3) JSON數(shù)據(jù)樣本
創(chuàng)建一個(gè)SampleData.json文件，其中包含要在甘特圖中顯示的示例任務(wù)列表。
SampleData.json內(nèi)容。
[{
"Name" : "Task 1",
"ID" : 1,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "8:00:00",
"Description" : "Description of Task 1"
},
{
"Name" : "Task 2",
"ID" : 2,
"PredecessorIndices" : "1",
"StartTime" : "2012-02-03T00:00:00Z",
"Effort" : "16:00:00",
"Description" : "Description of Task 2"
},
{
"Name" : "Task 3",
"ID" : 3,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "1.12:30:00",
"ProgressPercent" : 90,
"Description" : "Description of Task 3"
},
{
"Name" : "Child Task 1",
"ID" : 4,
"IndentLevel" : 1,
"StartTime" : "2012-02-03T00:00:00Z",
"Effort" : "8:00:00",
"ProgressPercent" : 75,
"Description" : "Description of Task 3/Child Task 1"
},
{
"Name" : "Child Task 2",
"ID" : 5,
"IndentLevel" : 1,
"PredecessorIndices" : "4+8",
"Description" : "Description of Task 3/Child Task 2"
},
{
"Name" : "Grand Child Task 1",
"ID" : 6,
"IndentLevel" : 2,
"StartTime" : "2012-02-03T00:00:00Z",
"Effort" : "8:00:00",
"Description" : "Description of Task 3/Child Task 1/Grand Child 1"
},
{
"Name" : "Grand Child Task 2",
"ID" : 7, "IndentLevel" : 2,
"StartTime" : "2012-02-03T00:00:00Z",
"Effort" : "16:00:00",
"Description" : "Description of Task 3/Child Task 1/Grand Child 2"
},
{
"Name" : "Child Task 3",
"ID" : 8,
"IndentLevel" : 1,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "16:00:00",
"Description" : "Description of Task 3/Child Task 3"
},
{
"Name" : "Task 4",
"ID" : 9,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "00:00:00",
"ProgressPercent" : 60,
"Description" : "Description of Task 4"
},
{
"Name" : "Task 5",
"ID" : 10,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "8:00:00",
"PredecessorIndices" : "3+8",
"Description" : "Description of Task 5"
},
{
"Name" : "Child Task 1",
"ID" : 11,
"IndentLevel" : 1,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "16:00:00",
"Description" : "Description of Task 5/Child Task 1"
},
{
"Name" : "Child Task 2",
"ID" : 12,
"PredecessorIndices" : "11SS",
"IndentLevel" : 1,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "8:00:00",
"Description" : "Description of Task 5/Child Task 2"
},
{
"Name" : "Task 6",
"ID" : 13,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "1.16:00:00",
"Description" : "Description of Task 6"
},
{
"Name" : "Child Task 1",
"ID" : 14,
"IndentLevel" : 1,
"StartTime" : "2012-02-02T00:00:00Z",
"Effort" : "1.20:00:00",
"Description" : "Description of Task 6/Child Task 1"
},
{
"Name" : "Grand Child Task 1",
"ID" : 15,
"StartTime" : "2012-02-04T00:00:00Z",
"Effort" : "1.00:00:00",
"IndentLevel" : 2,
"Description" : "Description of Task 6/Child Task 2"
}]
4)包含甘特部件的HTML文件
在項(xiàng)目目錄中創(chuàng)建一個(gè)新的HTML文件(MyFirstGantt)并引用以下源文件。請(qǐng)記住在下面最后一篇引用中鏈接到RadiantQ jQuery甘特的正確版本。
<head>
<title></title>
<link href="Src/Styles/jQuery-ui-themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="Src/Styles/radiantq.gantt.default.css" rel="stylesheet" />
<link href="Src/Styles/VW.Grid.css" rel="stylesheet" />
<script src="Src/Scripts/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript" 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" type="text/javascript"></script>
<script src="Src/ResourceStrings/en-US.js" type="text/javascript"></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>
</head>
初始化甘特表
現(xiàn)在必須設(shè)置希望在GanttTable中顯示的不同列。可以通過定義列對(duì)象的集合來實(shí)現(xiàn)，如下所示。
var columns = [
{
field: "Activity_M().ID_M()",
title: "ID",
iseditable: false,
width: 25
},
{
field: "Activity_M().ActivityName_M()",
title: "Activity Name",
width: 200,
editor: RadiantQ.Default.Template.ProjectGanttExpandableTextboxEditor(),
template: RadiantQ.Default.Template.ProjectGanttExpandableTextBlockTemplate()
},
{
field: "Activity_M().StartTime_M()",
title: "StartTime",
width: 150,
format: "MM/dd/yy",
editor: "<input data-bind='ActivityTimeBinder:Activity_M().StartTime_M' />"
},
{
field: "Activity_M().EndTime_M()",
title: "EndTime",
width: 150,
format: "MM/dd/yy",
cellalign: "center",
editor: "<input data-bind='value:Activity_M().EndTime_M' data-getvalueName='getDate' data-setvaluename='setDate' data-valueUpdate='onBlur' data-role=\"DateTimePicker\" />"
},
{
field: "Activity_M().Effort_M()",
title: "Effort",
format: "" /*to call the .toString()*/,
width: 100,
editor: "<input data-bind='value:Activity_M().Effort_M' ' data-role=\"DurationPicker\" />"
},
{
field: "Activity_M().ProgressPercent_M()",
title: "ProgressPercent",
width: 150,
editor: "<input data-bind='value:Activity_M().ProgressPercent_M' data-role=\"spinner\" data-options='{\"min\":0, \"max\": 100}' />"
},
{
field: "Activity_M().Assignments_M()",
title: "Resource",
iseditable: false,
template: '<div> ${ RadiantQ.Gantt.ValueConverters.ConverterUtils.GetResourcesText(data.Activity_M().Assignments_M(), false) } </div>',
width: 100
},
{
field: "Activity.PredecessorIndexString",
title: "PredecessorIndex",
isParentEditable: false,
template: "<div>${data.PredecessorIndexString || '' }</div>",
editor: "<input data-bind='value:PredecessorIndexString'/>",
width: 150
}];
創(chuàng)建甘特
現(xiàn)在包含檢索上面創(chuàng)建的json文件的代碼，然后初始化GanttControl小部件，將其與加載的數(shù)據(jù)綁定在一起。
<script type="text/javascript">
this.jsonData = null;
var self = this;
$.holdReady(true);
$.ajax({
type: "GET",
dataType: 'json',
url: 'SampleData.json',
converters:
{
"text json": function (data) {
//console.log(data);
return $.parseJSON(data, true
/*converts date strings to date objects*/
, true
/*converts ISO dates to local dates*/
);
}
},
success: function (data) {
self.jsonData = data;
$.holdReady(false);
}
});
$(document).ready(function () {
var anchorTime = new Date(2014, 01, 02, 00, 00, 00);
var $gantt_container = $("#gantt_container");
$gantt_container.GanttControl({
ProjectStartDate: anchorTime,
DataSource: self.jsonData,
GanttTableOptions:{
columns:columns
},
IDBinding: new RadiantQ.BindingOptions("ID"),
NameBinding: new RadiantQ.BindingOptions("Name"),
IndentLevelBinding: new RadiantQ.BindingOptions("IndentLevel"),
StartTimeBinding: new RadiantQ.BindingOptions("StartTime"),
EffortBinding: new RadiantQ.BindingOptions("Effort"),
PredecessorIndicesBinding: new RadiantQ.BindingOptions("PredecessorIndices"),
ProgressPercentBinding: new RadiantQ.BindingOptions("ProgressPercent"),
DescriptionBinding: new RadiantQ.BindingOptions("Description"),
GanttChartTemplateApplied: function (sender , args) {
var $GanttChart = args.element;
$GanttChart.GanttChart({ AnchorTime: anchorTime });
}
});
});
</script>
<body>
<!-- Div that will be transformed into the gantt widget above.-->
<div id="gantt_container" style="height:550px;"></div>
<!-- GanttTable and Gantttable contents comes here.-->
</body>
你的MyFirstGantt目錄的內(nèi)容應(yīng)該是這樣的:
在瀏覽器中打開FirstGanttSample.html，你應(yīng)該在瀏覽器中得到這個(gè):
最后，看一看這個(gè)主題，展示如何清理項(xiàng)目中的Src文件夾以刪除不必要的文件。
有關(guān)如何將更改持久化回?cái)?shù)據(jù)庫的示例，請(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ù)沉淀之作，通過連接企業(yè)接單、采購、制造、倉儲(chǔ)物流等整個(gè)供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。>>查看APS詳細(xì)信息
想要購買甘特圖正版授權(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@ke049m.cn
文章轉(zhuǎn)載自：
半島外圍網(wǎng)上直營 
11次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線