jQuery Gantt Package是一個真正的跨平臺，基于HTML5 / jQuery的本地實現，具有2個不同的gantt小部件，可滿足您所有基于gantt的可視化需求。還帶有ASP.NET WebControl和MVC擴展，可輕松集成到現有應用中。
點擊下載jQuery Gantt Package試用版
你的第一個甘特
讓我們從創建一個新的項目目錄開始，例如MyFirstGantt。
1)甘特部件源JS文件
首先，您需要Gantt小部件所需的JS源文件。這些文件在<安裝路徑>/Src文件夾中。只需將整個Src文件夾復制到上面的示例目錄中。這個文件夾還有其他相關的css文件。您可以刪除“Src/bin”文件夾，因為這個PHP示例不需要這樣做。
然后將<install path="">/PlatformSamples/PHPSamples/lib文件夾中的PHP庫文件復制到sample目錄中。</install>
2)示例實用程序JS文件
在<install path="">/Samples/Scripts文件夾中有一些帶有實用函數的JS文件，可以在網格中進行內聯編輯等。</install>將整個腳本目錄復制到MyFirstGantt中。3) JSON數據樣本
創建一個SampleData。json文件，包含要在甘特圖中顯示的示例任務列表。
SampleData。json內容:
[{
"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文件
在項目目錄(MyFirstGantt)中創建一個新的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
創建甘特和甘特表
初始化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目錄的內容應該像這樣:
-
Src
-
Scripts
-
json file
-
PHP file
在瀏覽器中打開FirstGanttSample.PHP，你應該會在瀏覽器中看到:
最后，看看這個主題，它展示了如何清理項目中的Src文件夾以刪除不必要的文件。
相關產品介紹：
VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構建復雜且內容豐富的甘特圖的理想工具
phGantt Time Package：對任務和時間的分配管理的甘特圖
dhtmlxGantt：交互式JavaScript / HTML5甘特圖
APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。>>查看APS詳細信息
想要購買甘特圖正版授權，或了解更多產品信息請點擊【咨詢在線客服】
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
18次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線