彩票走势图

jQuery Gantt Package使用教程：创建您的第一个甘特图

翻译|使用教程|编辑：杨鹏连|2020-09-07 10:42:29.357|阅读 339 次

概述：本文介绍了jQuery甘特包如何创建您的第一个甘特图？

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

jQuery Gantt Package是一个真正的跨平台，基于HTML5 / jQuery的本地实现，具有2个不同的gantt小部件，可满足您所有基于gantt的可视化需求。还带有ASP.NET WebControl和MVC扩展，可轻松集成到现有应用中。

点击下载jQuery Gantt Package试用版

您的第一个甘特图

让我们先创建一个新的项目目录，例如MyFirstGantt。

1) Gantt Widget源码JS文件

首先，你需要甘特小部件所需的JS源文件。这些文件在<安装路径>/Src文件夹中。只需将整个Src文件夹复制到上面的目录中即可。这个文件夹里还有其他依赖的css文件等。你可以删除 "Src/bin "文件夹，因为这个HTML样本不需要这个文件夹。

2) 实用程序JS文件样本

一些带有实用功能的JS文件，可以在网格中进行内联编辑等，在<安装路径&gt;/Samples/脚本文件夹中。将整个 Scripts 目录复制到 MyFirstGantt 中。

3) JSON数据样本

创建一个SampleData.json文件，其中包含要在甘特图中显示的示例任务列表。
SampleData.json内容。 

[{
    "Name" : "Task 1",
    "ID" : 1,
    "StartTime" : "2012-02-02T00:00:00Z",
    "Effort" : "8:00:00",
    "Description" : "Description of Task 1"
},
{
    "Name" : "Task 2",
    "ID" : 2,
    "PredecessorIndices" : "1",
    "StartTime" : "2012-02-03T00:00:00Z",
    "Effort" : "16:00:00",
    "Description" : "Description of Task 2"
},
{
    "Name" : "Task 3",
    "ID" : 3,
    "StartTime" : "2012-02-02T00:00:00Z",
    "Effort" : "1.12:30:00",
    "ProgressPercent" : 90,
    "Description" : "Description of Task 3"     
},
{
    "Name" : "Child Task 1",
    "ID" : 4,
    "IndentLevel" : 1,
    "StartTime" : "2012-02-03T00:00:00Z",
    "Effort" : "8:00:00",
    "ProgressPercent" : 75,
    "Description" : "Description of Task 3/Child Task 1"
},
{
    "Name" : "Child Task 2",
    "ID" : 5,
    "IndentLevel" : 1,
    "PredecessorIndices" : "4+8",
    "Description" : "Description of Task 3/Child Task 2"
},
{
    "Name" : "Grand Child Task 1",
    "ID" : 6,
    "IndentLevel" : 2,
    "StartTime" : "2012-02-03T00:00:00Z",
    "Effort" : "8:00:00",
    "Description" : "Description of Task 3/Child Task 1/Grand Child 1"
},

{
    "Name" : "Grand Child Task 2",
    "ID" : 7, "IndentLevel" : 2,
    "StartTime" : "2012-02-03T00:00:00Z",
    "Effort" : "16:00:00",
    "Description" : "Description of Task 3/Child Task 1/Grand Child 2"
},

{
    "Name" : "Child Task 3",
    "ID" : 8,
    "IndentLevel" : 1,
    "StartTime" : "2012-02-02T00:00:00Z",
    "Effort" : "16:00:00",
    "Description" : "Description of Task 3/Child Task 3"
},

{
    "Name" : "Task 4",
    "ID" : 9,
    "StartTime" : "2012-02-02T00:00:00Z",
    "Effort" : "00:00:00",
    "ProgressPercent" : 60,
    "Description" : "Description of Task 4"
},

{
    "Name" : "Task 5",
    "ID" : 10,
    "StartTime" : "2012-02-02T00:00:00Z",
    "Effort" : "8:00:00",
    "PredecessorIndices" : "3+8",
    "Description" : "Description of Task 5"  
},

{
    "Name" : "Child Task 1",
    "ID" : 11,
    "IndentLevel" : 1,
    "StartTime" : "2012-02-02T00:00:00Z",
    "Effort" : "16:00:00",
    "Description" : "Description of Task 5/Child Task 1"
},

{
    "Name" : "Child Task 2",
    "ID" : 12,
    "PredecessorIndices" : "11SS",
    "IndentLevel" : 1,
    "StartTime" : "2012-02-02T00:00:00Z",
    "Effort" : "8:00:00",
    "Description" : "Description of Task 5/Child Task 2"
},

{
    "Name" : "Task 6",
    "ID" : 13,
    "StartTime" : "2012-02-02T00:00:00Z",
    "Effort" : "1.16:00:00",
    "Description" : "Description of Task 6" 
},

{
    "Name" : "Child Task 1",
    "ID" : 14,
    "IndentLevel" : 1,
    "StartTime" : "2012-02-02T00:00:00Z",
    "Effort" : "1.20:00:00",
    "Description" : "Description of Task 6/Child Task 1"  
},

{
    "Name" : "Grand Child Task 1",
    "ID" : 15,
    "StartTime" : "2012-02-04T00:00:00Z",
    "Effort" : "1.00:00:00",
    "IndentLevel" : 2,
    "Description" : "Description of Task 6/Child Task 2"
}]


4)包含甘特部件的HTML文件

在项目目录中创建一个新的HTML文件(MyFirstGantt)并引用以下源文件。请记住在下面最后一篇引用中链接到RadiantQ jQuery甘特的正确版本。

<head>

    <title></title>
    <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 type="text/javascript" src="Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js" ></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>

</head>

初始化甘特表

现在必须设置希望在GanttTable中显示的不同列。可以通过定义列对象的集合来实现，如下所示。

         var columns = [

         {

             field: "Activity_M().ID_M()",

             title: "ID",

             iseditable: false,

             width: 25

         },

         {

             field: "Activity_M().ActivityName_M()",

             title: "Activity Name",

             width: 200,

             editor: RadiantQ.Default.Template.ProjectGanttExpandableTextboxEditor(),

             template: RadiantQ.Default.Template.ProjectGanttExpandableTextBlockTemplate()

         },

         {

             field: "Activity_M().StartTime_M()",

             title: "StartTime",

             width: 150,

             format: "MM/dd/yy",

             editor: "<input data-bind='ActivityTimeBinder:Activity_M().StartTime_M' />"

         },

         {

             field: "Activity_M().EndTime_M()",

             title: "EndTime",

             width: 150,

             format: "MM/dd/yy",

             cellalign: "center",

             editor: "<input data-bind='value:Activity_M().EndTime_M' data-getvalueName='getDate' data-setvaluename='setDate'  data-valueUpdate='onBlur'  data-role=\"DateTimePicker\"  />"

         },

         {

             field: "Activity_M().Effort_M()",

             title: "Effort",

             format: "" /*to call the .toString()*/,

             width: 100,

             editor: "<input data-bind='value:Activity_M().Effort_M' '  data-role=\"DurationPicker\"  />"

         },

         {

             field: "Activity_M().ProgressPercent_M()",

             title: "ProgressPercent",

             width: 150,

             editor: "<input  data-bind='value:Activity_M().ProgressPercent_M' data-role=\"spinner\" data-options='{\"min\":0, \"max\": 100}' />"

         },

         {

             field: "Activity_M().Assignments_M()",

             title: "Resource",

             iseditable: false,

             template: '<div> ${ RadiantQ.Gantt.ValueConverters.ConverterUtils.GetResourcesText(data.Activity_M().Assignments_M(), false) } </div>',

             width: 100

         },

         {

             field: "Activity.PredecessorIndexString",

             title: "PredecessorIndex",

             isParentEditable: false,

             template: "<div>${data.PredecessorIndexString || '' }</div>",

             editor: "<input data-bind='value:PredecessorIndexString'/>",

             width: 150

         }];
创建甘特

现在包含检索上面创建的json文件的代码，然后初始化GanttControl小部件，将其与加载的数据绑定在一起。

<script type="text/javascript">

        this.jsonData = null;

        var self = this;



        $.holdReady(true);

        $.ajax({

               type: "GET",

               dataType: 'json',

               url: 'SampleData.json',

               converters:

               {

               "text json": function (data) {

                            //console.log(data);

               return $.parseJSON(data, true

               /*converts date strings to date objects*/

               , true

               /*converts ISO dates to local dates*/

               );

               }

               },

               success: function (data) {

               self.jsonData = data;

               $.holdReady(false);

               }

        });



        $(document).ready(function () {

               var anchorTime = new Date(2014, 01, 02, 00, 00, 00);

               var $gantt_container = $("#gantt_container");

               $gantt_container.GanttControl({

              ProjectStartDate: anchorTime,

              DataSource: self.jsonData,

                     GanttTableOptions:{

                             columns:columns

                     },

                     IDBinding: new RadiantQ.BindingOptions("ID"),

                     NameBinding: new RadiantQ.BindingOptions("Name"),

                     IndentLevelBinding: new RadiantQ.BindingOptions("IndentLevel"),

                     StartTimeBinding: new RadiantQ.BindingOptions("StartTime"),

                     EffortBinding: new RadiantQ.BindingOptions("Effort"),

                     PredecessorIndicesBinding: new RadiantQ.BindingOptions("PredecessorIndices"),

                     ProgressPercentBinding: new RadiantQ.BindingOptions("ProgressPercent"),

                     DescriptionBinding: new RadiantQ.BindingOptions("Description"),

              GanttChartTemplateApplied: function (sender , args) {

                       var $GanttChart = args.element;

                       $GanttChart.GanttChart({ AnchorTime: anchorTime });

                     }

               });

        });

    </script>



<body>

    <!-- Div that will be transformed into the gantt widget above.-->

    <div id="gantt_container" style="height:550px;"></div>

    <!-- GanttTable and Gantttable contents comes here.-->

</body>
你的MyFirstGantt目录的内容应该是这样的:
  • Src
  • 脚本
  • json文件
  • html文件
在浏览器中打开FirstGanttSample.html，你应该在浏览器中得到这个:

jQuery Gantt Package使用教程：创建您的第一个甘特图

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

有关如何将更改持久化回数据库的示例，请浏览关于持久化更改的本主题。

相关产品介绍：

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

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

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


标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自：

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP