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)甘特部件源JS文件
首先，您需要Gantt小部件所需的JS源文件。這些文件在<安裝路徑>/Src文件夾中。只需將整個(gè)Src文件夾復(fù)制到上面的示例目錄中。這個(gè)文件夾還有其他相關(guān)的css文件。您可以刪除“Src/bin”文件夾，因?yàn)檫@個(gè)PHP示例不需要這樣做。
然后將<install path="">/PlatformSamples/PHPSamples/lib文件夾中的PHP庫(kù)文件復(fù)制到sample目錄中。</install>
2)示例實(shí)用程序JS文件
在<install path="">/Samples/Scripts文件夾中有一些帶有實(shí)用函數(shù)的JS文件，可以在網(wǎng)格中進(jìn)行內(nèi)聯(lián)編輯等。</install>將整個(gè)腳本目錄復(fù)制到MyFirstGantt中。3) JSON數(shù)據(jù)樣本
創(chuàng)建一個(gè)SampleData。json文件，包含要在甘特圖中顯示的示例任務(wù)列表。
SampleData。json內(nèi)容:
[{
"TName" : "Team1",
"PStartTime" : "2012-04-02T00:00:00Z",
"PEndTime" : "2012-04-18T00:00:00Z",
"Resources" : [{
"RName" : "JohnH",
"PStartTime" : "2012-04-04T00:00:00Z",
"PEndTime" : "2012-04-15T00:00:00Z",
"Tasks" : [{
"TaskName" : "Task 1",
"StartTime" : "2012-04-03T00:00:00Z",
"EndTime" : "2012-04-12T00:00:00Z",
"Progress" : 20
}]
},
{
"RName" : "VictorG",
"PStartTime" : "2012-04-06T00:00:00Z",
"PEndTime" : "2012-04-18T00:00:00Z",
"Tasks" : [{
"TaskName" : "Task 1",
"StartTime" : "2012-04-03T00:00:00Z",
"EndTime" : "2012-04-18T00:00:00Z",
"Progress" : 20
}]
},
{
"RName" : "JasonS",
"PStartTime" : "2012-04-06T00:00:00Z",
"PEndTime" : "2012-04-18T00:00:00Z",
"Tasks" : [{
"TaskName" : "Task 1",
"StartTime" : "2012-04-06T00:00:00Z",
"EndTime" : "2012-04-12T00:00:00Z",
"Progress" : 20
},
{
"TaskName" : "Task 2",
"StartTime" : "2012-04-12T00:00:00Z",
"EndTime" : "2012-04-18T00:00:00Z",
"Progress" : 70
}]
}]
},
{
"TName" : "Team2",
"PStartTime" : "2012-04-10T00:00:00Z",
"PEndTime" : "2012-04-20T00:00:00Z",
"Resources" : [{
"RName" : "BalajiN",
"PStartTime" : "2012-04-08T00:00:00Z",
"PEndTime" : "2012-04-18T00:00:00Z",
"Tasks" : [{
"TaskName" : "Task 1",
"StartTime" : "2012-04-08T00:00:00Z",
"EndTime" : "2012-04-20T00:00:00Z",
"Progress" : 20
}]
},
{
"RName" : "LiM",
"PStartTime" : "2012-04-12T00:00:00Z",
"PEndTime" : "2012-04-18T00:00:00Z",
"Tasks" : [{
"TaskName" : "Task 1",
"StartTime" : "2012-04-08T00:00:00Z",
"EndTime" : "2012-04-19T00:00:00Z",
"Progress" : 90
}]
},
{
"RName" : "StacyH",
"PStartTime" : "2012-04-05T00:00:00Z",
"PEndTime" : "2012-04-20T00:00:00Z",
"Tasks" : [{
"TaskName" : "Task 1",
"StartTime" : "2012-04-06T00:00:00Z",
"EndTime" : "2012-04-12T00:00:00Z",
"Progress" : 20
}]
}]
}]
4)包含甘特小部件的PHP文件
在項(xiàng)目目錄(MyFirstGantt)中創(chuàng)建一個(gè)新的PHP文件，并引用以下源文件。記得在下面的最后一篇參考中鏈接到RadiantQ jQuery甘特的正確版本。
<!DOCTYPE html>
<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 src="Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"></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>>
<script src="/Samples/Src/Scripts/RQGantt_Init.min.js" type="text/javascript"></script>
<!-- It automatically includes required PHP gantt extension files-->
require_once "lib/AutoLoad.php
創(chuàng)建甘特和甘特表
初始化GanttControl小部件和Gantt表，如下所示
<?php
//Gantt Settings
$ganttSetttings = new RadiantQ\Gantt\GanttSettings();
//GanttControl Options.
$options= new RadiantQ\Gantt\FlexyGanttOptions();
$ganttSetttings->DataSourceUrl = "FlexyGanttSkeleton.json";
//column defintions
$NameColumn = new RadiantQ\Gantt\Column();
$NameColumn->field="Name";
$NameColumn->title= "Name";
$NameColumn->clientEditorTemplate= "flexyGantNameEditor";
$NameColumn->clientTemplate = "flexyGanttNameColumnTemplate";
$GanttTableOptions->columns = array($NameColumn);
$options->GanttTableOptions = $GanttTableOptions;
$options->HierarchyResolverFunction = "ResolverFunction";
$options->TaskTooltipTemplateID = "TaskTooltipTemplate";
$options->TaskStartTimeProperty = "StartTime";
$options->TasksListProperty = "Tasks";
$options->ParentTaskStartTimeProperty = "PStartTime";
$options->TaskItemTemplate = "<div class='rq-gc-taskbar'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div></div>";
$options->ParentTaskItemTemplate = "<div class='parentBar-style'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div><div class='rq-gc-parentBar-leftCue'></div><div class='rq-gc-parentBar-middle'></div><div class='rq-gc-parentBar-rightCue'></div></div>";
$options->TaskEndTimeProperty = "EndTime";
$options->ParentTaskEndTimeProperty = "PEndTime";
//GanttChart options.
$GanttChartOptions = new RadiantQ\Gantt\GanttChartOptions();
$GanttChartOptions->AnchorTime = new DateTime("2014-04-03");
$GanttChartOptions->TimeIndicatorLineOption = 1;
$options ->GanttChartOptions = $GanttChartOptions;
$ganttSetttings->Options =$options;
//Ganttcontrol initialization.
$gantt = new RadiantQ\UI\FlexyGantt($ganttSetttings);
//Setting attributes to Ganttcontrol elements.
$gantt->setStyleAttribute("width","100%")->setStyleAttribute("height","100%")->setAttribute("id","gantt_container");
//To render the FlexyGantt.
echo $gantt->Render();
?>
//Name template and editor with expander cue.
<script id="flexyGanttNameColumnTemplate" type="text/x-jquery-tmpl">
<div class="rq-grid-expand-indentWidth" style="height: 1px; width: ${RadiantQ.Gantt.LevelToIndentWidth(data.Level(), data.IsParentType())}px"></div>
<div style="width: 12px; display: ${data.IsParentType() ? "block" : "none" }" class="arrowContainer">
<div onclick="ExpanderOnclick(this,event)" id="arrow" class="${data.HierarchicalItem.IsExpanded() ? "rq-grid-expand-arrow rq-grid-collapse-arrow": "rq-grid-expand-arrow"} rq-Ignore-click"></div>
</div>
<div class="rq-grid-expander-text">${nameConverter(data)}</div>
</script>
<script id="flexyGantNameEditor" type="text/x-jquery-tmpl">
<div class="rq-grid-expand-indentWidth" style="height: 1px; width: ${RadiantQ.Gantt.LevelToIndentWidth(data.Level(), data.IsParentType())}px"></div>
<div style="width: 12px; display: ${data.IsParentType() ? (data.HierarchicalItem.CanShowCue() ? "block" :"none") : "none"}" class="arrowContainer">
<div onclick="ExpanderOnclick(this,event)" id="arrow" class="${data.HierarchicalItem.IsExpanded() ? " 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: nameConverter" /></div>
</script>
Script
// to get the name from the bounded list
function nameConverter(flexyNodeData, value) {
var data;
// The grid calls this converter with flexyNodeData as a arg.
if (flexyNodeData.Data)
data = flexyNodeData.Data();
// The grid calls this converter with flexyNodeData as a datacontext.
else
data = flexyNodeData;
if (value == undefined) {
if (data["TName"] != undefined)
return data["TName"];
else if (data["RName"] != undefined)
return data["RName"];
else if (data["TaskName"] != undefined)
return data["TaskName"];
}
else {
if (data["TName"] != undefined)
data["TName"] = value;
else if (data["RName"] != undefined)
data["RName"] = value;
else if (data["TaskName"] != undefined)
data["TaskName"] = value;
}
return;
};
//to resolve the hierarchical data source.
function ResolverFunction(data) {
// If data is wrapped by KO, then data itself could be a function and so we pick the object from the function.
if ($.isFunction(data)) {
data = data()[0];
}
if (data["Resources"] != undefined) {
if ($.isFunction(data["Resources"]))
return data["Resources"]();
else
return data["Resources"];
}
else if (data["RName"] != undefined) {
if (data["Tasks"] != undefined) {
return null;
}
else
// Return an empty array to keep this a collapsible parent with no children. Return null to make this a leaf node.
return new Array();
}
return null;
}
你的MyFirstGantt目錄的內(nèi)容應(yīng)該像這樣:
-
Src
-
Scripts
-
json file
-
PHP file
在瀏覽器中打開FirstGanttSample.PHP，你應(yīng)該會(huì)在瀏覽器中看到:
最后，看看這個(gè)主題，它展示了如何清理項(xiàng)目中的Src文件夾以刪除不必要的文件。
相關(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)買甘特圖正版授權(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)上直營(yíng) 
19次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營(yíng)相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線