DHTMLX Gantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的大部分開發(fā)需求，具備完善的甘特圖圖表庫，功能強(qiáng)大，價(jià)格便宜，提供豐富而靈活的JavaScript API接口，與各種服務(wù)器端技術(shù)（PHP，ASP.NET，Java等）簡單集成，滿足多種定制開發(fā)需求。

DHTMLX JavaScript UI 庫所開發(fā)的 JavaScript 組件易于使用且功能豐富，非常適合任何領(lǐng)域和任何復(fù)雜性的解決方案，能夠節(jié)省創(chuàng)建和維護(hù)業(yè)務(wù)應(yīng)用程序的時(shí)間，提高生產(chǎn)力。

DHTMLX Gantt 最新下載

甘特圖控件交流群：764148812

錯(cuò)誤處理

異常篩選器可用于捕獲 CRUD 處理程序中的異常并返回客戶端響應(yīng) 客戶端甘特圖可以識(shí)別。

要為甘特圖提供錯(cuò)誤處理，請執(zhí)行以下步驟：

轉(zhuǎn)到App_Start并添加一個(gè)名為 GanttAPIExceptionFilterAttribute 的新類：

using System.Net;
using System.Net.Http;
using System.Web.Http.Filters;

namespace DHX.Gantt.Web
{
public class GanttAPIExceptionFilterAttribute : ExceptionFilterAttribute
{
public override void OnException(HttpActionExecutedContext context)
{

context.Response = context.Request.CreateResponse(
HttpStatusCode.InternalServerError, new
{
action = "error",
message = context.Exception.Message
}
);
}
}
}

然后我們將此類添加到我們的 WebAPI 控制器中：

• 數(shù)據(jù)控制者：

namespace DHX.Gantt.Web.Controllers
{
[GanttAPIExceptionFilter]
public class DataController : ApiController

• 鏈路控制器：

namespace DHX.Gantt.Web.Controllers
{
[GanttAPIExceptionFilter]
public class LinkController : ApiController

• 和任務(wù)控制器：

namespace DHX.Gantt.Web.Controllers
{
[GanttAPIExceptionFilter]
public class TaskController : ApiController

現(xiàn)在，如果任何 Web API 控制器在處理請求時(shí)觸發(fā)異常， 客戶端將收到錯(cuò)誤狀態(tài)和錯(cuò)誤消息，可以以某種方式處理或向用戶顯示。

請注意，向客戶端返回異常消息可能不是生產(chǎn)環(huán)境的最佳主意。

存儲(chǔ)任務(wù)的順序

客戶端甘特圖允許使用拖放對任務(wù)進(jìn)行重新排序。因此，如果您使用此功能，則必須將此訂單存儲(chǔ)在數(shù)據(jù)庫中。 您可以在此處查看常見說明。

現(xiàn)在讓我們將此功能添加到我們的應(yīng)用程序中。

在客戶端上啟用任務(wù)重新排序

首先，我們需要允許用戶在 UI 中更改任務(wù)順序。

打開索引視圖并更新甘特圖的配置：

gantt.config.order_branch = true;
gantt.config.order_branch_free = true;

// specifying the date format
gantt.config.date_format = "%Y-%m-%d %H:%i";
// initializing gantt
gantt.init("gantt_here");

向模型添加任務(wù)順序

現(xiàn)在，讓我們在后端反映這些更改。

我們將訂單存儲(chǔ)在名為 SortOrder 的屬性中，因此讓我們相應(yīng)地更新 Task 類：

using System;
using System.ComponentModel.DataAnnotations;

namespace DHX.Gantt.Web.Models
{
public class Task
{
public int Id { get; set; }
[MaxLength(255)]
public string Text { get; set; }
public DateTime StartDate { get; set; }
public int Duration { get; set; }
public decimal Progress { get; set; }
public int? ParentId { get; set; }
public string Type { get; set; }
public int SortOrder { get; set; }
}
}

現(xiàn)在我們需要更新任務(wù)控制器，即：

• 客戶端應(yīng)接收按 SortOrder 值排序的任務(wù)：

namespace DHX.Gantt.Web.Controllers
{
[GanttAPIExceptionFilter]
public class TaskController : ApiController
{
private GanttContext db = new GanttContext();

// GET api/Task
public IEnumerable<TaskDto> Get()
{
return db.Tasks
.OrderBy(t => t.SortOrder)
.ToList()
.Select(t => (TaskDto)t);
}

• 新任務(wù)應(yīng)接收默認(rèn)值 SortOrder：

namespace DHX.Gantt.Web.Controllers
{
[System.Web.Http.HttpPost]
public IHttpActionResult CreateTask(TaskDto taskDto)
{
var newTask = (Task)taskDto;

newTask.SortOrder = db.Tasks.Max(t => t.SortOrder) + 1;

db.Tasks.Add(newTask);
db.SaveChanges();

return Ok(new
{
tid = newTask.Id,
action = "inserted"
});
}

• 在客戶端上修改任務(wù)順序時(shí)，應(yīng)更新 SortOrder。

當(dāng)用戶更改任務(wù)順序時(shí)，gantt 將調(diào)用 PUT 操作，在請求的“target”屬性中提供有關(guān)新任務(wù)位置的信息，以及任務(wù)屬性的其余部分。

因此，我們應(yīng)該為任務(wù) DTO 類添加一個(gè)額外的屬性：

namespace DHX.Gantt.Web.Models
{
public class TaskDto
{
public int id { get; set; }
public string text { get; set; }
public string start_date { get; set; }
public int duration { get; set; }
public decimal progress { get; set; }
public int? parent { get; set; }
public string type { get; set; }
public bool open{ get { return true; } set { } }
public string target { get; set; }

...
}
}

現(xiàn)在我們將在 PUT （EditTask） 操作中實(shí)現(xiàn)重新排序：

// PUT api/Task/5
[System.Web.Http.HttpPut]
public IHttpActionResult EditTask(int id, TaskDto taskDto)
{
var updatedTask = (Task)taskDto;
updatedTask.Id = id;

if (!string.IsNullOrEmpty(taskDto.target))
{
// reordering occurred
this._UpdateOrders(updatedTask, taskDto.target);
}

db.Entry(updatedTask).State = EntityState.Modified;
db.SaveChanges();

return Ok(new
{
action = "updated"
});
}

private void _UpdateOrders(Task updatedTask, string orderTarget)
{
int adjacentTaskId;
var nextSibling = false;

var targetId = orderTarget;

// adjacent task id is sent either as '{id}' or as 'next:{id}' depending
// on whether it's the next or the previous sibling
if (targetId.StartsWith("next:"))
{
targetId = targetId.Replace("next:", "");
nextSibling = true;
}

if (!int.TryParse(targetId, out adjacentTaskId))
{
return;
}

var adjacentTask = db.Tasks.Find(adjacentTaskId);
var startOrder = adjacentTask.SortOrder;

if (nextSibling)
startOrder++;

updatedTask.SortOrder = startOrder;

var updateOrders = db.Tasks
.Where(t => t.Id != updatedTask.Id)
.Where(t => t.SortOrder >= startOrder)
.OrderBy(t => t.SortOrder);

var taskList = updateOrders.ToList();

taskList.ForEach(t => t.SortOrder++);
}

已知問題

當(dāng)應(yīng)用在 IIS 上運(yùn)行時(shí)，HTTP PUT 和 DELETE 請求返回 405 或 401 錯(cuò)誤。 此問題可能是由 WebDAV 模塊引起的，該模塊可能與 RESTful 處理程序沖突。

作為常見的解決方案，可以從 web.config 文件中禁用該模塊。此處提供了更多詳細(xì)信息。

應(yīng)用程序安全性

甘特圖不提供任何方法來防止應(yīng)用程序受到各種威脅，例如SQL注入或XSS和CSRF攻擊。重要的是，確保應(yīng)用程序安全的責(zé)任在于實(shí)現(xiàn)后端的開發(fā)人員。閱讀相應(yīng)文章中的詳細(xì)信息。

故障排除

ASP.NET Web 應(yīng)用程序模板不存在

如果在 Visual Studio 2022 中找不到必要的“ASP.NET Web 應(yīng)用程序”項(xiàng)目模板，請執(zhí)行以下步驟：

1. 關(guān)閉視覺工作室 2022

2. 開始菜單 - > Visual Studio 安裝程序

3. 查找視覺工作室社區(qū) 2022 ->點(diǎn)擊修改

4. 在打開的窗口中，選擇單個(gè)組件，選中列表中的“.NET Framework 項(xiàng)目和項(xiàng)模板”點(diǎn)，然后單擊“修改”

之后，您可以啟動(dòng) Visual Studio 2022 并找到必要的模板。

初始化數(shù)據(jù)庫時(shí)發(fā)生異常

有時(shí)，您可能會(huì)遇到 DropCreateDatabaseIfModelChanges 初始值設(shè)定項(xiàng)的問題，該初始值設(shè)定項(xiàng)會(huì)刪除現(xiàn)有數(shù)據(jù)庫，但不創(chuàng)建新數(shù)據(jù)庫。

在這種情況下，打開 GanttInitializer.cs并將 DropCreateDatabaseIfModelChanges 替換為 DropCreateDatabaseAlways：

using System;
using System.Collections.Generic;
using System.Data.Entity;

namespace DHX.Gantt.Web.Models
{
public class GanttInitializer : DropCreateDatabaseAlways<GanttContext>
{
...
}
}

然后再次運(yùn)行該應(yīng)用程序。

呈現(xiàn)任務(wù)和鏈接的問題

如果您已完成上述步驟以實(shí)現(xiàn)甘特圖與 MVC ASP.NET 集成，但甘特圖未在頁面上呈現(xiàn)任務(wù)和鏈接，請查看排查后端集成問題一文。它描述了確定問題根源的方法。

DHTMLX Gantt享有超十年聲譽(yù)，支持跨瀏覽器和跨平臺(tái)，性價(jià)比高，可滿足項(xiàng)目管理控件應(yīng)用的所有需求，是較為完善的甘特圖圖表庫

甘特圖控件交流群：764148812

歡迎進(jìn)群交流討論，獲取更多幫助請聯(lián)系