如何创建RadiantQ jQuery甘特包？
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文件夹以删除不必要的文件。
