彩票走势图

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

点击下载jQuery Gantt Package试用版

-HTML模板样本

项目甘特示例应该使用元素“<rq:ganttcontrol>&lt;/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>

<!--Column Templates-->

<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>

<!--Column Editors-->

<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>

[{

    "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

“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.

    };

}

甘特部件初始化过程在'RQGanttSettings中进行。带有用户选项的ts'。

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

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

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

Angular中

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

相关产品介绍：

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

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