dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

點擊下載dhtmlxGantt試用版

存儲任務順序

用戶可以通過拖放客戶端甘特圖來重新安排任務。如果使用此功能，則應將任務的順序存儲在數據庫中。有關詳細信息，請閱讀本節。

請繼續閱讀以了解如何啟用存儲甘特圖的任務順序。

在客戶端重新排序

首先在客戶端啟用任務的重新排序。將這些行添加到index.html：
wwwroot / index.html

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");

接下來，您必須更改后端，以使其反映任務的當前順序。向任務模型添加另一種方法：
型號/Task.cs

using System;
 
namespace DHX.Gantt.Models
{
    public class Task
    {
        public int Id { get; set; }
        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; } 
    }
}

您還需要更新控制器。

1.客戶端應接收按SortOrder值排序的任務。將突出顯示的行添加到DataController：
控制器/DataController.cs

[HttpGet]
public object Get()
{
    return new
        {
            data = _context.Tasks
           .OrderBy(t => t.SortOrder) 
           .ToList()
           .Select(t => (WebApiTask)t),
            links = _context.Links
                .ToList()
                .Select(l => (WebApiLink)l)
        };
}

控制器/ TaskController.cs

// POST api/task
[HttpPost]
public IActionResult Post(WebApiTask apiTask)
{
    var newTask = (Task)apiTask;
 
    newTask.SortOrder = _context.Tasks.Max(t => t.SortOrder) + 1; 
    _context.Tasks.Add(newTask);
    _context.SaveChanges();
 
    return Ok(new
    {
        tid = newTask.Id,
        action = "inserted"
    });
}

添加target到WebApiTask.cs類：

型號/WebApiTask.cs

public class WebApiTask
{
    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 string target { get; set; } 
    public bool open
    {
        get { return true; }
        set { }
    }
}

控制器/ TaskController.cs

// PUT api/task/5
[HttpPut("{id}")]
public IActionResult Put(int id, WebApiTask apiTask)
{
    var updatedTask = (Task)apiTask;
    updatedTask.Id = id;
 
    var dbTask = _context.Tasks.Find(id);
    dbTask.Text = updatedTask.Text;
    dbTask.StartDate = updatedTask.StartDate;
    dbTask.Duration = updatedTask.Duration;
    dbTask.ParentId = updatedTask.ParentId;
    dbTask.Progress = updatedTask.Progress;
    dbTask.Type = updatedTask.Type;
 
    if (!string.IsNullOrEmpty(apiTask.target))                     
    {                                                   
         // reordering occurred                         
         this._UpdateOrders(dbTask, apiTask.target);    
    }                                                   
 
    _context.SaveChanges();
 
    _return Ok(new
    {
         action = "updated"
    });
}

控制器/ TaskController.cs

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 = _context.Tasks.Find(adjacentTaskId);
    var startOrder = adjacentTask.SortOrder;
 
    if (nextSibling)
         startOrder++;
 
    updatedTask.SortOrder = startOrder;
 
    var updateOrders = _context.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++);
}

關產品推薦：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件

AnyGantt：構建復雜且內容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包

phGantt Time Package：對任務和時間的分配管理的甘特圖

APS幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率