1. 软市首页
  2. 软件教程

jQuery Gantt Package使用教程：创建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文件

创建一个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表，如下所示

<hp//Gantt Settings$ganttSetttings = new RadiantQGanttGanttSettings();//GanttControl Options.$options= new RadiantQGanttFlexyGanttOptions();$ganttSetttings->DataSourceUrl = "FlexyGanttSkeleton.json";//column defintions  $NameColumn = new  RadiantQGanttColumn();$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 RadiantQGanttGanttChartOptions(); $GanttChartOptions->AnchorTime =  new DateTime("2014-04-03");$GanttChartOptions->TimeIndicatorLineOption = 1;$options ->GanttChartOptions = $GanttChartOptions;$ganttSetttings->Options =$options;  //Ganttcontrol initialization.$gantt = new RadiantQUIFlexyGantt($ganttSetttings);//Setting attributes to Ganttcontrol elements.$gantt->setStyleAttribute("width","100%")->setStyleAttribute("height","100%")->setAttribute("id","gantt_container");//To render the FlexyGantt.echo $gantt->Render();gt;//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 listfunction 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，你应该会在浏览器中看到:

jQuery Gantt Package使用教程：创建RadiantQ jQuery甘特包

最后，看看这个主题，它展示了如何清理项目中的Src文件夹以删除不必要的文件。

相关产品介绍：

VARCHART XGantt：支持ActiveX、.Net等平台的C#甘特图控件
AnyGantt：构建复杂且内容丰富的甘特图的理想工具
phGantt Time Package：对任务和时间的分配管理的甘特图
dhtmlxGantt：交互式JavaScript / HTML5甘特图

APS是科技15年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。>>查看APS详细信息

想要购买甘特图正版授权，或了解更多产品信息请点击【咨询在线客服】

jQuery Gantt Package使用教程：创建RadiantQ jQuery甘特包

标签：

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

0
上一篇 2021年1月8日
下一篇 2021年1月8日

相关推荐

发表回复

登录后才能评论
首页
软件超市
企服市场
会员中心