头图

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

阅读 58
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
宣传栏