翻譯|使用教程|編輯:楊鵬連|2021-01-11 10:00:23.067|閱讀 239 次
概述:Query Gantt Package是跨平臺(tái)、基于HTML5 / jQuery的本地實(shí)現(xiàn),具有2個(gè)不同的gantt小部件。本文介紹了 如何創(chuàng)建RadiantQ jQuery甘特包。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
jQuery Gantt Package是一個(gè)真正的跨平臺(tái),基于HTML5 / jQuery的本地實(shí)現(xiàn),具有2個(gè)不同的gantt小部件,可滿足您所有基于gantt的可視化需求。還帶有ASP.NET WebControl和MVC擴(kuò)展,可輕松集成到現(xiàn)有應(yīng)用中。
點(diǎn)擊下載jQuery Gantt Package試用版
你的第一個(gè)甘特
讓我們從創(chuàng)建一個(gè)新的項(xiàng)目目錄開始,例如MyFirstGantt。
1)甘特部件源JS文件
	首先,您需要Gantt小部件所需的JS源文件。這些文件在<安裝路徑>/Src文件夾中。只需將整個(gè)Src文件夾復(fù)制到上面的示例目錄中。這個(gè)文件夾還有其他相關(guān)的css文件。您可以刪除“Src/bin”文件夾,因?yàn)檫@個(gè)PHP示例不需要這樣做。
然后將<install path="">/PlatformSamples/PHPSamples/lib文件夾中的PHP庫(kù)文件復(fù)制到sample目錄中。</install>
2)示例實(shí)用程序JS文件
在<install path="">/Samples/Scripts文件夾中有一些帶有實(shí)用函數(shù)的JS文件,可以在網(wǎng)格中進(jìn)行內(nèi)聯(lián)編輯等。</install>將整個(gè)腳本目錄復(fù)制到MyFirstGantt中。3) JSON數(shù)據(jù)樣本
	創(chuàng)建一個(gè)SampleData。json文件,包含要在甘特圖中顯示的示例任務(wù)列表。
SampleData。json內(nèi)容:
[{
    "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文件
	在項(xiàng)目目錄(MyFirstGantt)中創(chuàng)建一個(gè)新的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
創(chuàng)建甘特和甘特表
	初始化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目錄的內(nèi)容應(yīng)該像這樣:
最后,看看這個(gè)主題,它展示了如何清理項(xiàng)目中的Src文件夾以刪除不必要的文件。
相關(guān)產(chǎn)品介紹:
	VARCHART XGantt:支持ActiveX、.Net等平臺(tái)的C#甘特圖控件
AnyGantt:構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
phGantt Time Package:對(duì)任務(wù)和時(shí)間的分配管理的甘特圖
dhtmlxGantt:交互式JavaScript / HTML5甘特圖
	APS是慧都科技15年行業(yè)經(jīng)驗(yàn)以及技術(shù)沉淀之作,通過(guò)連接企業(yè)接單、采購(gòu)、制造、倉(cāng)儲(chǔ)物流等整個(gè)供應(yīng)鏈流程,幫助提升企業(yè)生產(chǎn)效率。>>查看APS詳細(xì)信息
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: