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，也可以来自本地函数(循环项源)。
<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"" }' }
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！