彩票走势图

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

翻译|使用教程|编辑:杨鹏连|2020-08-31 10:27:53.330|阅读 321 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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)
        };
}
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 int? parent { 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系统请点击

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP