jQuery Gantt 패키지는 HTML5 / jQuery 로컬 구현을 기반으로하는 진정한 크로스 플랫폼으로, 모든 간트 기반 시각화 요구 사항을 충족 할 수있는 2 개의 서로 다른 간트 위젯이 있습니다. 또한 기존 응용 프로그램에 쉽게 통합 할 수있는 ASP.NET WebControl 및 MVC 확장과 함께 제공됩니다.
jQuery Gantt 패키지 평가판을 다운로드하려면 클릭하십시오.
Visual Studio에서 새 ASP.NET 프로젝트를 만듭니다.
VS 2012 : 파일-> 새로 만들기-> 프로젝트-> 설치됨-> 템플릿-> 기타 언어-> TypeScript, 프로젝트를 만듭니다.
Gantt 패키지에는 컴파일 타임에 확인되는 다른 형식 안전 언어와 마찬가지로 웹 응용 프로그램을 개발하는 데 도움이되는 필요한 Gantt TypeScript 인터페이스가 포함되어 있습니다.
1) 간트 위젯 소스 코드 JS 파일
먼저 Gantt 위젯에 필요한 JS 소스 파일이 필요합니다. 이러한 파일은 <설치 경로> / Src 폴더에 있습니다. 이 폴더를 위의 프로젝트 폴더에 복사합니다 (이 폴더의 크기는 매우 크지 만 테마, 로케일 등에 필요한 모든 CSS가 포함되어 있지만 모든 CSS가 페이지에로드되는 것은 아닙니다).
Src 폴더에서 bin 폴더를 계속 삭제하십시오.
그런 다음 프로젝트의 솔루션 탐색기에서 "모든 파일 표시"도구 모음 항목을 클릭하여 새로 포함 된 Src 폴더를 표시하고 프로젝트에 포함시킵니다.
2) 실용적인 JS 파일 샘플
유용한 기능이있는 일부 JS 파일은 그리드에서 인라인으로 편집 할 수 있습니다. 이러한 파일은 / Samples / Scripts 폴더에 있습니다. 위의 설치 경로에있는 Scripts 폴더의 내용을 프로젝트 폴더의 Scripts 폴더에 복사합니다 (새 프로젝트를 생성하면 Scripts 폴더가 프로젝트 폴더에 자동으로 생성됩니다).
그런 다음 이전 단계의 단계에 따라 새로 추가 된 스크립트 파일을 프로젝트에 포함합니다.
3) JSON 데이터 샘플
Gantt 차트에 표시 할 샘플 작업 목록이 포함 된 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) Gantt 위젯이 포함 된 HTML 파일
프로젝트에서 새 HTML 파일을 만들고 다음 소스 파일을 참조합니다. 아래 마지막 인용문에서 RadiantQ jQuery Gantt의 올바른 버전에 연결하는 것을 잊지 마십시오.
<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 src="Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"></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>
<body>
<div id="pagecontent" style="height: 600px;">
<div id="gantt_container" style="height: 100%;">
</div>
</div>
</body>
5）TypeScript文件
在你的项目中，在该HTML旁边添加一个新的TypeScript文件(myApp.ts)，并引用html中的结果js。
<head>
other script fils.
<script src=myApp.js type='text/javascript'></script>
</head>
6) TypeScript 파일에 Ganttcontrol 위젯을 만듭니다.
$.ajax({
type: "GET",
dataType: 'json',
url: 'GanttControlSkeleton.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) {
loadGantt(data);
}
});
function loadGantt(datasourcejson) {
var columns = [
{
field: "Activity_M().ID_M()",
title: "ID",
width: 20
},
{
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: 100,
format: "MM/dd/yy",
cellalign: "center",
editor: "<input data-bind=' ValueBinder.ActivityTimeBinder:Activity_M().StartTime_M' />"
},
{
field: "Activity_M().EndTime_M()",
title: "EndTime",
width: 100,
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' style='height:18px' data-role=\"DurationPicker\" />"
},
{
field: "Activity_M().ProgressPercent_M()",
title: "ProgressPercent",
width: 100,
editor: "<input style='height:18px' data-bind='value:Activity_M().ProgressPercent_M' data-role=\"spinner\" data-options='{\"min\":0, \"max\": 100}' />"
},
{
field: "Activity_M().Assignments_M()",
title: "Assignments",
iseditable: false,
template: '<div> ${ RadiantQ.Gantt.ValueConverters.ConverterUtils.GetResourcesText(data.Activity_M().Assignments_M(), false) } </div>',
width: 200
},
{
field: "Activity_M().PredecessorIndexString_M()",
title: "PredecessorIndex",
template: "<div>${data.PredecessorIndexString || '' }</div>",
editor: "<input data-bind='value:PredecessorIndexString'/>",
width: 150
}
];
var ganttControl: GanttControl;
var anchorTime = datasourcejson[0].StartTime["clone"]();
var $gantt_container = $('#gantt_container');
$gantt_container.GanttControl({
ProjectStartDate: anchorTime,
DataSource: datasourcejson,
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"),
TimeRangeHighlightBehavior: RadiantQ.Gantt.TimeRangeHighlightBehavior.HighlightInChartOnHeaderMouseHover,
GanttChartTemplateApplied: function (sender , args) {
ganttControl = <GanttControl>$gantt_container.data("GanttControl");
var $ganttChart = args.element;
$ganttChart.GanttChart({
AnchorTime: anchorTime });
}
});
};
마지막으로이 항목을 살펴보고 프로젝트에서 Src 폴더를 정리하고 불필요한 파일을 삭제하는 방법을 알려줍니다.
APS 는 주문, 구매, 제조, 창고 보관 및 물류와 같은 기업의 전체 공급망 프로세스를 연결하여 기업의 생산 효율성을 향상시킵니다. >> APS 상세 정보보기