91网站免费看,日韩综合区,人人操人人摸97

jQuery Gantt Package使用教程：在Visual Studio中創(chuàng)建一個新的ASP.NET項目

翻譯|使用教程|編輯：楊鵬連|2021-02-20 09:39:32.127|閱讀 190 次

概述：本文介紹了如何在Visual Studio中創(chuàng)建一個新的ASP.NET項目。

jQuery Gantt Package是一個真正的跨平臺，基于HTML5 / jQuery的本地實現(xiàn)，具有2個不同的gantt小部件，可滿足您所有基于gantt的可視化需求。還帶有ASP.NET WebControl和MVC擴展，可輕松集成到現(xiàn)有應(yīng)用中。

點擊下載jQuery Gantt Package試用版

在Visual Studio中創(chuàng)建一個新的ASP.NET項目：

VS 2012 :FILE --> New --> Project --> Installed --> Templates --> Other Language --> TypeScript，創(chuàng)建一個項目。

甘特包包括必要的甘特TypeScript接口，以幫助你開發(fā)你的Web應(yīng)用程序，就像其他類型安全語言一樣，編譯時檢查。

1) Gantt Widget源碼JS文件

首先，你需要甘特小部件所需的JS源文件。這些文件在<安裝路徑>/Src文件夾中。把這個文件夾復(fù)制到上面的Project文件夾里面（雖然這個文件夾的大小非常大，但是它包含了所有Themes、locales等所需要的CSS等，并不是所有的CSS都會被加載到你的頁面里面）。

繼續(xù)刪除這個Src文件夾里面的bin文件夾。

然后在項目的解決方案資源管理器中點擊 "顯示所有文件 "工具條項來顯示這個新包含的Src文件夾，并將其包含在項目中。

2）實用JS文件樣本
一些帶有實用功能的JS文件，可以在網(wǎng)格中進行內(nèi)嵌編輯等，這些文件在<install path>/Samples/Scripts文件夾中。將上述安裝路徑中的Scripts文件夾的內(nèi)容復(fù)制到你的項目文件夾中的Scripts文件夾中（當(dāng)你創(chuàng)建一個新項目時，項目文件夾中會自動創(chuàng)建一個Scripts文件夾）。
然后按照上一步的步驟將新添加的腳本文件包含到你的項目中。

3) JSON數(shù)據(jù)樣本

創(chuàng)建一個SampleData.json文件，其中包含要在甘特圖中顯示的示例任務(wù)列表。

SampleData.json內(nèi)容：

[{
    "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文件

在你的項目中創(chuàng)建一個新的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中的結(jié)果js。

<head>
    other script fils.
    <script src=myApp.js type='text/javascript'></script>
</head>

6）在TypeScript文件里面創(chuàng)建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文件夾，刪除不必要的文件。

相關(guān)產(chǎn)品介紹：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
phGantt Time Package：對任務(wù)和時間的分配管理的甘特圖
dhtmlxGantt：交互式JavaScript / HTML5甘特圖

APS是慧都科技15年行業(yè)經(jīng)驗以及技術(shù)沉淀之作，通過連接企業(yè)接單、采購、制造、倉儲物流等整個供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。>>查看APS詳細信息

想要購買甘特圖正版授權(quán)，或了解更多產(chǎn)品信息請點擊【咨詢在線客服】

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：

上一篇： Parasoft C/C++test （Eclipse）2020.2系列教程：創(chuàng)建一個C ++ test項目下一篇：干貨放送！DevExpress控件開發(fā)常用知識點全解