jQuery Gantt如何在Visual Studio中创建一个新的ASP.NET项目

• 

  roffey

  2021-02-23 16:34:03
• Javascript
• 翻译

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文件，可以在网格中进行内嵌编辑等，这些文件在/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。

    

5）TypeScript文件

在你的项目中，在该HTML旁边添加一个新的TypeScript文件(myApp.ts)，并引用html中的结果js。

    other script fils.
    

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: ""
            },
            {
                field: "Activity_M().EndTime_M()",
                title: "EndTime",
                width: 100,
                format: "MM/dd/yy",
                cellalign: "center",
                editor: ""
            },
            {
                field: "Activity_M().Effort_M()",
                title: "Effort",
                format: "" /*to call the .toString()*/,
                width: 100,
                editor: ""
            },
            {
                field: "Activity_M().ProgressPercent_M()",
                title: "ProgressPercent",
                width: 100,
                editor: ""
            },
            {
                field: "Activity_M().Assignments_M()",
                title: "Assignments",
                iseditable: false,
                template: '
 ${                 RadiantQ.Gantt.ValueConverters.ConverterUtils.GetResourcesText(data.Activity_M().Assignments_M(), false) }                        
',              
                width: 200
            },
            {
                field: "Activity_M().PredecessorIndexString_M()",
                title: "PredecessorIndex",
                template: "
${data.PredecessorIndexString || '' }
",
                editor: "",
                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 = $gantt_container.data("GanttControl");
            var $ganttChart = args.element;
            $ganttChart.GanttChart({ AnchorTime: anchorTime });
        }
    });
};

最后，看看这个主题，告诉你如何清理项目中的Src文件夹，删除不必要的文件。