jQuery Gantt Package使用教程：创建RadiantQ jQuery甘特包-控件新闻-慧都网

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

翻译|使用教程|编辑：杨鹏连|2021-01-11 10:00:23.067|阅读 155 次

概述：Query Gantt Package是跨平台、基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件。本文介绍了如何创建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目录的内容应该像这样: