玖草在线免费视频,日韩免费福利影院,heyzo综合高清

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

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

翻譯|使用教程|編輯：楊鵬連|2020-11-09 11:55:08.167|閱讀 341 次

概述：jQuery Gantt Package是跨平臺、基于HTML5 / jQuery的本地實現，具有2個不同的gantt小部件。本文介紹了如何在Visual Studio中創建一個新的ASP.NET項目。

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

點擊下載jQuery Gantt Package試用版

VS 2012 :FILE --> New --> Project --> Visual C# --> Web --> ASP.NET Web Forms Application，創建一個項目。
VS 2010 :FILE --> New --> Project --> Visual C# --> Web --> ASP.NET Web Application，創建一個項目。

1）甘特小部件源碼JS文件

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

繼續刪除這個Src文件夾里面的bin文件夾。

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

2）實用JS文件樣本

一些帶有實用功能的JS文件在<安裝路徑>/Samples/腳本文件夾中。將上述安裝路徑中的Scripts文件夾的內容復制到項目文件夾中的Scripts文件夾中（當你創建一個新項目時，項目文件夾中會自動創建一個Scripts文件夾）。

然后按照上一步的步驟將新添加的腳本文件包含到您的項目中。

3) 創建一個樣本數據源(JSON數據)

你通常會使用實體模型、ADO.NET等來從數據庫中檢索數據。但是，為了保持簡單，我們將創建一個簡單的 "任務 "列表，并將其從服務器返回給客戶端。

創建一個名為TaskInfo的新類型來表示任務實例。在Solution Explorer中右擊項目名稱，然后添加-->新建項目-->類（稱其為TaskInfo.cs），并定義一個類似下面的類。

public class TaskInfo
{     
    public string Name { get; set; }
    public int IndentLevel { get; set; }
    public DateTime StartTime { get; set; }
    public string Effort { get; set; }
    public double ProgressPercent { get; set; }
    public string Resources { get; set; }
    public int ID { get; set; }
    public string PredecessorIndices { get; set; }
    public int SortOrder { get; set; }
    public string Description { get; set; }
    public object Tag { get; set; }
    public int Priority { get; set; }
    public DateTime PlannedStartTime { get; set; }
    public DateTime PlannedEndTime { get; set; }
    public double Cost { get; set; }
    public DateTime EndTime { get; set; }
}

然后，添加一個新的通用處理程序到項目中；這將為客戶端頁面提供數據源。

要在visual studio中添加一個Generic handler，在Solution Explorer中右擊項目名稱，然后Add --> New Item --> Generic Handler，并創建一個新的實例，將其命名為，例如DataHandler.ashx。

在通用處理程序(DataHandler.ashx)中創建一個TaskInfos列表，使用JavaScriptSerializer或任何其他 "JSON序列化器 "將該列表轉換為json數據，并將其添加到響應中。

public class DataHandler : IHttpHandler
{
    DateTime dt = DateTime.Today;
    public void ProcessRequest(HttpContext context)
    {
        List<TaskInfo> taskItems = new List<TaskInfo>
        {
            new TaskInfo { Name = "Task 1", ID = 1,  StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 1" },

            new TaskInfo { Name = "Child Task 1", ID = 2,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), Description = "Description of Task 2" },

            new TaskInfo { Name = "Task 3", ID = 3, StartTime =dt, Effort=TimeSpan.FromDays(4).ToString(), Description = "Description of Task 3" },

            new TaskInfo { Name = "Child Task 1", ID = 4,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(3).ToString(), Description = "Description of Task 4" },

            new TaskInfo { Name = "Child Task 2", ID = 5, IndentLevel=2, StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 5" },

            new TaskInfo { Name = "Task 6", ID = 6, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), Description = "Description of Task 6" },

            new TaskInfo { Name = "Task 7", ID = 7, StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 7" },

            new TaskInfo { Name = "Child Task 1", ID = 8,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), PredecessorIndices="6+2" }

        };

        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        context.Response.Write(serializer.Serialize(taskItems));
    }
public bool IsReusable
{
    get
    {
        return false;
    }
}   
}

4) 包含甘特圖小部件的ASPX文件。

創建.aspx示例文件

在visual studio的SolutionExplorer中右擊項目名稱，然后添加-->新建項目-->Web Form(稱之為WebForm1.aspx)。

在創建的aspx中包含以下命名空間。

<%@ Register Assembly="RadiantQ.Web.JQGantt" Namespace="RadiantQ.WebForms.JQGantt" TagPrefix="RQ" %>。

添加RadiantQ.Web.JQGantt.dll到你的項目參考中，你可以在這里找到dll。<安裝文件夾>/Src/\bin/DotNET4MVC4/RadiantQ.Web.JQGantt.dll。

在aspx的<head>標簽中引用以下源文件。記得在下面最后一行引用中鏈接到正確版本的RadiantQ jQuery Gantt。

<head runat="server">
    <title></title>
    <link id="themeChooser" href="<%= Page.ResolveClientUrl("~/Src/Styles/jQuery-ui-themes/smoothness/jquery-ui.css") %>" rel="stylesheet" />
    <link id="default" href="<%= Page.ResolveClientUrl("~/Src/Styles/radiantq.gantt.default.css") %>" rel="stylesheet" />
    <link href="<%= Page.ResolveClientUrl("~/Src/Styles/VW.Grid.css") %>" rel="stylesheet" />
    <script src="<%= Page.ResolveClientUrl("~/Src/Scripts/jquery-1.11.2.min.js") %>" type="text/javascript"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js") %>"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/jquery.layout-latest.min.js") %>"></script>
    <script src="<%= Page.ResolveClientUrl("~/Src/Scripts/Utils/date.js") %>" type="text/javascript"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/ResourceStrings/en-US.js") %>"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/VW.Grid.1.min.js") %>"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/RadiantQ-jQuery.gantt.5.0.trial.min.js") %>"></script>
    <script src="<%= Page.ResolveClientUrl("~/Src/Scripts/RQGantt_Init.min.js")%>" type="text/javascript"></script>
</head>

創建甘特圖

現在包含代碼來檢索上面創建的json文件，然后初始化GanttControl小組件，將其與加載的數據綁定。

在WebForm1.aspx中，在<body>中的默認<form>標簽中，添加以下標簽。

<body>
    <form id="form1" runat="server">
        <RQ:GanttControl ID="gantt" DataSourceUrl="DataHandler.ashx" Height="500px" runat="server"/>
         <div>
         </div>
    </form>
</body>

初始化甘特圖
現在，你必須設置你想在GanttTable中顯示的不同列，你可以通過在GanttControl的GanttTableOptions屬性中定義列來實現。你可以通過在GanttControl的GanttTableOptions屬性中定義列來實現。

    <RQ:GanttControl ID="gantt" DataSourceUrl="DataHandler.ashx" Height="500px" runat="server">
  <GanttTableOptions>
                <Columns>
                    <GanttBase:Column field="Activity.ID" width="25" title="ID" iseditable="false"></GanttBase:Column>

                    <GanttBase:Column field="Activity.ActivityName" width="200" title="Activity Name" clientTemplate="projectGanttNameTemplate" clientEditorTemplate="projectGanttNameEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.StartTime" width="100" title="StartTime" format="MM/dd/yy" clientEditorTemplate="startTimeEditor"></GanttBase:Column>                                                                                                   

                    <GanttBase:Column field="Activity.EndTime" width="100" title="EndTime" format="MM/dd/yy" clientEditorTemplate="endTimeEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.Effort" width="100" title="Effort" format="" clientEditorTemplate="effortEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.ProgressPercent" width="100" title="ProgressPercent" clientEditorTemplate="progressEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.Assignments" width="100" title="Resource" iseditable="false" clientTemplate="resourceTemplate"></GanttBase:Column>

                    <GanttBase:Column field="Activity.PredecessorIndexString" width="100" title="Predecessor Index" clientEditorTemplate="predecessorEditor" clientTemplate="predecessorTemplate" isParentEditable="false"></GanttBase:Column>
                </Columns>
            </GanttTableOptions>    
    </RQ:GanttControl>
   <%-- Column Template--%> 
<script id="projectGanttNameTemplate" type="text/x-jquery-tmpl">
         <div class="rq-grid-expand-indentWidth" style="height: 1px; width: ${data.IndentWidth_M()}px"></div>
         <div style="width: 12px; display: ${data.IsParent_M() ? "block" :"none" }" class="arrowContainer">
         <div onclick="ExpanderOnclick(this,event)" id="Div2" class="${ data.IsExpanded_M() ? " rq-grid-expand-arrow rq-grid-collapse-arrow": "rq-grid-expand-arrow"} rq-Ignore-click"></div>
         </div>
         <div class="rq-grid-expander-text">${data.Activity.ActivityName}</div>
    </script>  
    <script id="predecessorTemplate" type="text/x-jquery-tmpl">
        <div>${data.PredecessorIndexString_M() || '' }</div>
    </script>
<%--Column Editors  --%>
    <script id="startTimeEditor" type="text/x-jquery-tmpl">
        <input data-bind='ActivityTimeBinder: Activity_M().StartTime_M' />
    </script>
    <script id="endTimeEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: Activity_M().EndTime_M' data-getvaluename='getDate' data-setvaluename='setDate' data-valueupdate='onBlur' data-role="DateTimePicker" />
    </script>
    <script id="effortEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: Activity_M().Effort_M' data-role="DurationPicker" />
    </script> 
    <script id="progressEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: Activity_M().ProgressPercent_M' data-role="spinner" data-options='{"min":0, "max": 100}' />
    </script> 
    <script id="predecessorEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: PredecessorIndexString' />
    </script>

gantt 現在已經完全設置好，可以顯示從 ashx 處理程序返回的任務。

將 WebForm1.aspx 設為 "起始頁"。您可以通過在解決方案資源管理器中右鍵單擊該文件并選擇 "設置為起始頁 "來實現。

以下是最終的甘特圖：

相關產品介紹：

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

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

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

標簽：

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

文章轉載自：

上一篇：PyCharm 2020.3 ：可實現結對編程，智能文本校對等下一篇：質性數據分析軟件NVivo教程：項目保存和備份選項