dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。它允许你创建动态甘特图,并以一个方便的图形化方式可视化项目进度。有了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++);
}