关于html5:在Visual-Studio中创建一个新的ASPNET项目

90次阅读

共计 7056 个字符，预计需要花费 18 分钟才能阅读完成。

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 文件夹，删除不必要的文件。

正文完
html5
发表至： html5
2021-02-23
 0
关于javascript:免费开源基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表单五
关于html5:解决ios中input字体颜色设置输入placeholderdisabled状态
关于前端:利用flex解决input定位的问题
关于html5:GO语言环境搭建-及-helloworld开发