翻譯|使用教程|編輯:楊鵬連|2020-11-09 11:55:08.167|閱讀 359 次
概述:jQuery Gantt Package是跨平臺、基于HTML5 / jQuery的本地實現,具有2個不同的gantt小部件。本文介紹了 如何在Visual Studio中創建一個新的ASP.NET項目。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
jQuery Gantt Package是一個真正的跨平臺,基于HTML5 / jQuery的本地實現,具有2個不同的gantt小部件,可滿足您所有基于gantt的可視化需求。還帶有ASP.NET WebControl和MVC擴展,可輕松集成到現有應用中。
	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文件夾,并將其包含在項目中。
	
	 
	
一些帶有實用功能的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>
    <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@ke049m.cn
文章轉載自: