带有ASP.NET Core的dhtmlxGantt教程：如何启用存储甘特图的任务顺序

本教程为您提供有关如何在服务器端使用ASP.NET Core 2 创建Gantt的分步说明，如何启用存储甘特图的任务顺序。

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

dhtmlxGantt试用版

存储任务顺序

用户可以通过拖放客户端甘特图来重新安排任务。如果使用此功能，则应将任务的顺序存储在数据库中。有关详细信息，请阅读本节。

请继续阅读以了解如何启用存储甘特图的任务顺序。

在客户端重新排序

首先在客户端启用任务的重新排序。将这些行添加到index.html：
wwwroot / index.html

gantt.config.order_branch = true;gantt.config.order_branch_free = true;// specifying the date formatgantt.config.date_format = "%Y-%m-%d %H:%i";// initializing ganttgantt.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 intParentId { 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)        };}

2.新任务还应收到默认值SortOrder：

控制器/ 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"    });}

3. 在客户端上修改任务顺序时，应该更新sortOrder。当用户重新安排任务时，甘特将调用PUT动作，并在请求的“ target”属性以及其余任务属性中提供有关新任务位置的信息 。

添加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 intparent { get; set; }    public string type { get; set; }    public string target { get; set; }    public bool open    {        get { return true; }        set { }    }}

现在，让我们在PUT（EditTask）操作中实现重新排序。修改任务控制器的放置操作：

控制器/ 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帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买dhtmlxGantt正版授权，或了解APS系统请点击【咨询在线客服】
标签：