jQuery Gantt如何在Visual Studio中建立一個新的ASP.NET專案
jQuery Gantt Package是一個真正的跨平臺，基於HTML5 / jQuery的本地實現，具有2個不同的gantt小部件，可滿足您所有基於gantt的視覺化需求。還帶有ASP.NET WebControl和MVC擴充套件，可輕鬆整合到現有應用中。
在Visual Studio中建立一個新的ASP.NET專案：
VS 2012 :FILE --> New --> Project --> Installed --> Templates --> Other Language --> TypeScript，建立一個專案。
甘特包包括必要的甘特TypeScript介面，以幫助你開發你的Web應用程式，就像其他型別安全語言一樣，編譯時檢查。
1) Gantt Widget原始碼JS檔案
首先，你需要甘特小部件所需的JS原始檔。這些檔案在<安裝路徑>/Src資料夾中。把這個資料夾複製到上面的Project資料夾裡面（雖然這個資料夾的大小非常大，但是它包含了所有Themes、locales等所需要的CSS等，並不是所有的CSS都會被載入到你的頁面裡面）。
繼續刪除這個Src資料夾裡面的bin資料夾。
然後在專案的解決方案資源管理器中點選 "顯示所有檔案 "工具條項來顯示這個新包含的Src資料夾，並將其包含在專案中。
2）實用JS檔案樣本
一些帶有實用功能的JS檔案，可以在網格中進行內嵌編輯等，這些檔案在<install path>/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）包含甘特小部件的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資料夾，刪除不必要的檔案。
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69995027/viewspace-2758749/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- visual studio建立專案時需要注意的問題
- 建立一個ASP.NET MVC 5專案ASP.NETMVC
- 將編譯過的C++庫迅速部署在Visual Studio新專案中編譯C++
- 用 Visual Studio 升級 .NET 專案
- 【譯】如何在 Visual Studio 中安裝 GitHub CopilotGithub
- 如何在Visual Studio中除錯.NET原始碼除錯原始碼
- vue全家桶 ---建立一個新的vue專案Vue
- Visual Studio容器專案工程化心得
- Visual Studio開啟專案時出現“this project is incompatible with the current version of visual studio”錯誤Project
- 從webpack開始建立一個新的react專案WebReact
- 在 Visual Studio 市場中釋出專案擴充套件套件
- ASP.NET Core系列（二）：建立第一個.Net Core 專案ASP.NET
- Andorid Studio drawable資料夾建立專案只有一個問題
- 如何在專案中用 Vue 取代 jQueryVuejQuery
- Jersey2.x從MavenArchetype建立一個新專案Maven
- Visual Studio Installer打包安裝專案VS2015
- 如何在Github上建立一個新倉庫Github
- [Visual Studio+TFS--強大的專案管理工具]專案管理
- 做一個可以聊天的 Visual Studio Code 外掛
- Django建立第一個專案Django
- 建立第一個django專案Django
- Python 建立一個Django專案PythonDjango
- Visual Studio 2005 如何建立“Web 應用程式”Web
- Visual Studio和Git建立遠端連線Git
- Visual Studio系列教程：使用XAML工具建立使用者介面（一）
- Visual Studio Code 被發現新“漏洞”！瘋狂建立垃圾檔案+自動修改使用者檔案
- 在Visual Studio 中使用git——檔案管理-中（五）Git
- 使用命令列建立Android Studio專案命令列Android
- IDEA如何在一個專案空間下管理多個專案？Idea
- Flutter 建立第一個專案 for macFlutterMac
- ffmpeg學習window下使用Visual Studio建立cpp專案新增ffmpeg原始碼編譯好的依賴庫原始碼編譯
- SpringBoot專案建立與第一個SSM專案示例Spring BootSSM
- 7個深度工作的Visual Studio 外掛
- 使用Visual Studio 2022 建立lib和dll並使用
- Visual Studio Code中Python安裝庫檔案遇到的問題Python
- visual studio中顯示無法開啟ui檔案UI
- 如何接手一個新專案
- Visual Studio 檔案 BuildAction 屬性值UILDA