jQuery Gantt Package是一個真正的跨平臺，基于HTML5 / jQuery的本地實現，具有2個不同的gantt小部件，可滿足您所有基于gantt的可視化需求。還帶有ASP.NET WebControl和MVC擴展，可輕松集成到現有應用中。
點擊下載jQuery Gantt Package試用版
-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>
<!--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>
-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\…
相關產品介紹：
VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構建復雜且內容豐富的甘特圖的理想工具
phGantt Time Package：對任務和時間的分配管理的甘特圖
dhtmlxGantt：交互式JavaScript / HTML5甘特圖
APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。>>查看APS詳細信息
想要購買甘特圖正版授權，或了解更多產品信息請點擊【咨詢在線客服】
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
23次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線