jQuery Gantt Packageは、HTML5 / jQueryローカル実装に基づく真のクロスプラットフォームであり、2つの異なるガントウィジェットを備えており、ガントベースの視覚化のすべてのニーズを満たすことができます。また、ASP.NET WebControlおよびMVC拡張機能が付属しており、既存のアプリケーションに簡単に統合できます。
jQueryガントパッケージの試用版をダウンロードするにはクリックしてください
VisualStudioで新しいASP.NETプロジェクトを作成します。
VS 2012：ファイル->新規->プロジェクト->インストール済み->テンプレート->その他の言語-> TypeScript、プロジェクトを作成します。
Ganttパッケージには、コンパイル時にチェックされる他のタイプセーフ言語と同様に、Webアプリケーションの開発に役立つ必要なGanttTypeScriptインターフェイスが含まれています。
1）ガントウィジェットのソースコードJSファイル
まず、Ganttウィジェットに必要なJSソースファイルが必要です。これらのファイルは、<インストールパス> / Srcフォルダーにあります。このフォルダーを上のProjectフォルダーにコピーします（このフォルダーのサイズは非常に大きいですが、テーマやロケールなどに必要なすべてのCSSが含まれているため、すべてのCSSがページに読み込まれるわけではありません）。
Srcフォルダー内のbinフォルダーの削除を続行します。
次に、プロジェクトのソリューションエクスプローラーで[すべてのファイルを表示]ツールバー項目をクリックして、新しくインクルードされたSrcフォルダーを表示し、プロジェクトにインクルードします。
2）実用的なJSファイルのサンプル
便利な機能を備えた一部のJSファイルは、グリッド内でインラインで編集できます。これらのファイルは、/ Samples / Scriptsフォルダーにあります。上記のインストールパスのScriptsフォルダーの内容をプロジェクトフォルダーのScriptsフォルダーにコピーします（新しいプロジェクトを作成すると、Scriptsフォルダーがプロジェクトフォルダーに自動的に作成されます）。
次に、前の手順の手順に従って、新しく追加したスクリプトファイルをプロジェクトに含めます。
3）JSONデータサンプル
ガントチャートに表示されるサンプルタスクのリストを含む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 jQueryGanttの正しいバージョンにリンクすることを忘れないでください。
<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の詳細情報を見る