jQuery Gantt Package甘特图demo代码样本示例

转载

roffey 2020-09-24 11:06:36

文章标签 jQuery Gantt Packag Angular Gantt 甘特图 HTML5 / jQuery ASP.NET WebControl 文章分类 软件研发

-HTML模板样本

项目甘特示例应该使用元素“rq:ganttcontrol</rq:ganttcontrol>”创建。

您可以设置甘特选项，如Datasource, AnchorTime, ResizeToFit, UseVirtualization等，如这里所示。

gantt的数据源可以来自JSON，也可以来自本地函数(循环项源)。

应该使用可用属性创建甘特列。客户端和编辑器模板使用'<ng-template></ng-template>'来指定绝对模板引用(前缀为'#')，如图所示。 <RQ:GanttControl [DataSourceUrl]="'/app/Samples/GanttControlSkeleton/GanttControlSkeleton.json'" [AnchorTime]="'2018-02-02'" Height="500px" [ResizeToFit]="false" [AfterGanttWidgetInitializedCallback]="AfterGanttWidgetInitializedCallback"> <GanttTableOptions> <Columns> <Column field="Activity.ID" [width]="25" title="ID" [iseditable]="false"></Column> <Column field="Activity.ActivityName" [width]="200" title="Activity Name" [iseditable]="true" [isParentEditable]="true" [clientTemplate]="pgNameTemplate" [clientEditorTemplate]="pgNameEditorTemplate"></Column> <Column field="Activity.StartTime" [width]="150" title="StartTime" [format]="dateFormat" [clientEditorTemplate]="startTimeEditor"></Column> <Column field="Activity.EndTime" [width]="150" title="EndTime" [format]="dateFormat" [clientEditorTemplate]="endTimeEditor"></Column> <Column field="Activity.Effort" [width]="100" title="Effort" [clientTemplate]="effortTemplate" [clientEditorTemplate]="effortEditor"></Column> <Column field="Activity.ProgressPercent" [width]="100" title="ProgressPercent" [clientEditorTemplate]="progressPercentEditor"></Column> <Column field="Activity.PredecessorIndexString" [width]="100" title="Predecessor Index" [isParentEditable]="false" [clientTemplate]="predecessorIndexTemplate" [clientEditorTemplate]="predecessorIndexEditor"></Column> </Columns>

</GanttTableOptions>

</RQ:GanttControl>

<ng-template #pgNameTemplate>

<div #nameTemp>

    <div class="rq-grid-expand-indentWidth" [rqTemplateBinder]="nameColTempl.style_indentWidth"></div>

    <div class="arrowContainer" [rqTemplateBinder]="nameColTempl.style_arrowCont">

        <div id="arrow" [rqTemplateBinder]="nameColTempl.class_arrow" onclick="RadiantQ.Gantt.ExpanderOnclick(this,event)"></div>

    </div>

    <div class="rq-grid-expander-text" data-bind="text:Activity.ActivityName"></div>

    <div [getClientTemplate]="nameTemp.innerHTML"></div>

</div>

</ng-template>

<ng-template #effortTemplate>

<div #effortTemp>

    <div [getClientTemplate]="effortTemp.innerHTML" data-bind="text:Activity.CumulativeEffort.toString()"></div>

</div>

</ng-template>

<ng-template #predecessorIndexTemplate>

<div #predTemp>

    <div [getClientTemplate]="predTemp.innerHTML" data-bind='text:Activity.PredecessorIndexString'></div>

</div>

</ng-template>

<ng-template #pgNameEditorTemplate>

<div #nameEditor>

    <div class="rq-grid-expand-indentWidth" [rqTemplateBinder]="nameColTempl.style_indentWidth"></div>

    <div [rqTemplateBinder]="nameColTempl.style_arrowCont" class="arrowContainer">

        <div id="arrow" onclick="RadiantQ.Gantt.ExpanderOnclick(this,event)" [rqTemplateBinder]="nameColTempl.class_arrow"></div>

    </div>

    <div class="rq-grid-expander-text"><input data-bind=value:Activity.ActivityName /></div>

    <div [getClientEditorTemplate]="nameEditor.innerHTML"></div>

</div>

</ng-template>

<ng-template #startTimeEditor>

<div #startEditor>

    <input [getClientEditorTemplate]="startEditor.innerHTML" data-bind='ActivityTimeBinder:Activity.StartTime' />

</div>

</ng-template>

<ng-template #endTimeEditor>

<div #endEditor>

    <input [getClientEditorTemplate]="endEditor.innerHTML" data-bind='value:Activity.EndTime' data-getvalueName='getDate' data-setvaluename='setDate' data-valueUpdate='onBlur' data-role="DateTimePicker" />

</div>

</ng-template>

<ng-template #effortEditor>

<div #effEditor>

    <input [getClientEditorTemplate]="effEditor.innerHTML" data-bind='value:Activity.Effort' data-role="DurationPicker" />

</div>

</ng-template>

<ng-template #progressPercentEditor>

<div #progressEditor>

    <input [getClientEditorTemplate]="progressEditor.innerHTML" data-bind='value:Activity.ProgressPercent' data-role="spinner" data-options='{"min": 0, "max": 100}' />

</div>

</ng-template>

<ng-template #predecessorIndexEditor>

<div #predEditor>

    <input [getClientEditorTemplate]="predEditor.innerHTML" data-bind='value:Activity.PredecessorIndexString' />

</div>

</ng-template>

-JSON示例数据

创建一个SampleData。包含要在甘特图中显示的示例任务列表的json文件。 [{

"Name" : "Task 1",

"ID" : 1,

"StartTime" : "2018-02-02T00:00:00Z",

"Effort" : "8:00:00",

   "Resources" :"1",

"Description" : "Description of Task 1"

{

"Name" : "Task 2",

"ID" : 2,

"PredecessorIndices" : "1",

"StartTime" : "2018-02-03T00:00:00Z",

"Effort" : "16:00:00",

   "Resources" :"1",

"Description" : "Description of Task 2"

{

"Name" : "Task 3",

"ID" : 3,

"StartTime" : "2018-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" : "2018-02-03T00:00:00Z",

"Effort" : "8:00:00",

"ProgressPercent" : 100,

"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" : "2018-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" : "2018-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" : "2018-02-02T00:00:00Z",

"Effort" : "16:00:00",

"Description" : "Description of Task 3/Child Task 3"

{

"Name" : "Task 4",

"ID" : 9,

"StartTime" : "2018-02-02T00:00:00Z",

"Effort" : "00:00:00",

"ProgressPercent" : 60,

"Description" : "Description of Task 4"

{

"Name" : "Task 5",

"ID" : 10,

"StartTime" : "2018-02-02T00:00:00Z",

"Effort" : "8:00:00",

"PredecessorIndices" : "3+8,9",

"Description" : "Description of Task 5"

{

"Name" : "Child Task 1",

"ID" : 11,

"IndentLevel" : 1,

"StartTime" : "2018-02-02T00:00:00Z",

"Effort" : "1.16:00:00",

"Description" : "Description of Task 5/Child Task 1"

{

"Name" : "Child Task 2",

"ID" : 12,

"PredecessorIndices" : "11+8",

"IndentLevel" : 1,

"StartTime" : "2018-02-02T00:00:00Z",

"Effort" : "8:00:00",

"Description" : "Description of Task 5/Child Task 2"

{

"Name" : "Task 6",

"ID" : 13,

"StartTime" : "2018-02-02T00:00:00Z",

"Effort" : "1.16:00:00",

"Description" : "Description of Task 6"

{

"Name" : "Child Task 1",

"ID" : 14,

"IndentLevel" : 1,

"StartTime" : "2018-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" : "2018-02-04T00:00:00Z",

"Effort" : "1.00:00:00",

"IndentLevel" : 2,

   "Resources" :"1 , 2",

"Description" : "Description of Task 6/Child Task 2"

}]

GanttControlSkeleton.json

样例TS

“GanttControlSkeleton.ts的文件从顶级的ts文件夹中导入TypeScript库。

示例模板(GanttControlSkeleton.html)及其对应的CSS(GanttControlSkeleton. CSS)可以使用“@Component({})”装饰器声明，选择器为“ganttcontrol骨架”，在index.html中指定为示例根标签

这里，export类传递甘特选项的值，甘特选项在'GanttControlSkeleton中设置为模板。例如DataSource, AnchorTime, ResizetoFit, Columns和bindings。 /// <reference path="../../../ts/radiantqgantt_ts2.3.d.ts" />

/// <reference path="../../../ts/jquery.ui.d.ts" />

/// <reference path="../../../ts/datejs.d.ts" />

import { Component, ElementRef, ViewEncapsulation } from '@angular/core';

@Component({

selector: 'GanttControlSkeleton',

templateUrl: './app/Samples/GanttControlSkeleton/GanttControlSkeleton.html',

styleUrls: ['./app/Samples/GanttControlSkeleton/GanttControlSkeleton.css'],

encapsulation: ViewEncapsulation.None, // Fix: Styles for child elements not applied due to encapsulation(shadow dom).

})

export class GanttControlSkeleton {

private $gcSkeleton: HTMLElement = null;

nameColTempl = {

    style_indentWidth: { key: 'style', value: 'height: 1px; width: ${data.IndentWidth_M()}px' },

    style_arrowCont: { key: 'style', value: 'width: 12px; display: ${data.IsParent_M() ? \"block"\ :\"none"\  }' },

    class_arrow: { key: 'class', value: '${ data.IsExpanded_M() ? \" rq-grid-expand-arrow rq-grid-collapse-arrow"\: \"rq-grid-expand-arrow"\} rq-Ignore-click' }

};

dateFormat = Date["CultureInfo"]["formatPatterns"]["shortDate"];

constructor(private elementRef: ElementRef) {

    this.$gcSkeleton = elementRef.nativeElement;

}

AfterGanttWidgetInitializedCallback($gantt_container: any) {

    // This gets fired once after the gantt widget is intialized with user options.

    var ganttControl = $gantt_container.data('GanttControl');

    // Here, user can customize the gantt using this 'ganttControl' instance.

};

} “AfterGanttWidgetInitializedCallback”函数在使用用户选项初始化甘特小部件后触发一次。在这里，用户可以使用“ganttControl”实例自定义甘特甘特部件初始化过程在'RQGanttSettings中进行。带有用户选项的ts'。

以下路径说明了这一点: Angular中

:\PlatformSamples\AngularSamples\app\Samples\GanttControlSkeleton..

此外，通过以下路径在一个页面中导入“GanttControl和FlexyGantt”示例:

Angular中

in:\PlatformSamples\AngularSamples\app\Samples\ResourceLoadView\…