如何创建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文件夹以删除不必要的文件。