翻譯|使用教程|編輯:楊鵬連|2020-08-31 10:27:53.330|閱讀 407 次
概述:本教程為您提供有關(guān)如何在服務(wù)器端使用ASP.NET Core 2 創(chuàng)建Gantt的分步說(shuō)明,如何啟用存儲(chǔ)甘特圖的任務(wù)順序。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表??蓾M足項(xiàng)目管理應(yīng)用程序的所有需求,是最完善的甘特圖圖表庫(kù)。它允許你創(chuàng)建動(dòng)態(tài)甘特圖,并以一個(gè)方便的圖形化方式可視化項(xiàng)目進(jìn)度。有了dhtmlxGantt,你可以顯示活動(dòng)之間的依賴關(guān)系,顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動(dòng)到樹結(jié)構(gòu)。
存儲(chǔ)任務(wù)順序
用戶可以通過(guò)拖放客戶端甘特圖來(lái)重新安排任務(wù)。如果使用此功能,則應(yīng)將任務(wù)的順序存儲(chǔ)在數(shù)據(jù)庫(kù)中。有關(guān)詳細(xì)信息,請(qǐng)閱讀本節(jié)。
請(qǐng)繼續(xù)閱讀以了解如何啟用存儲(chǔ)甘特圖的任務(wù)順序。
在客戶端重新排序
首先在客戶端啟用任務(wù)的重新排序。將這些行添加到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");
將任務(wù)訂單添加到模型
接下來(lái),您必須更改后端,以使其反映任務(wù)的當(dāng)前順序。向任務(wù)模型添加另一種方法:
型號(hào)/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.客戶端應(yīng)接收按SortOrder值排序的任務(wù)。將突出顯示的行添加到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.新任務(wù)還應(yīng)收到默認(rèn)值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. 在客戶端上修改任務(wù)順序時(shí),應(yīng)該更新sortOrder。當(dāng)用戶重新安排任務(wù)時(shí),甘特將調(diào)用PUT動(dòng)作,并在請(qǐng)求的“ target”屬性以及其余任務(wù)屬性中提供有關(guān)新任務(wù)位置的信息 。
添加target到WebApiTask.cs類:
型號(hào)/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 { }
}
}
現(xiàn)在,讓我們?cè)赑UT(EditTask)操作中實(shí)現(xiàn)重新排序。修改任務(wù)控制器的放置操作:
控制器/ 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"
});
}
并添加將更新任務(wù)順序的方法:
控制器/ 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++);
}
關(guān)產(chǎn)品推薦:
VARCHART XGantt:支持ActiveX、.Net等平臺(tái)的C#甘特圖控件
AnyGantt:構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
jQuery Gantt Package:基于HTML5 / jQuery的跨平臺(tái)jQuery Gantt包
phGantt Time Package:對(duì)任務(wù)和時(shí)間的分配管理的甘特圖
APS幫助提升企業(yè)生產(chǎn)效率,真正實(shí)現(xiàn)生產(chǎn)計(jì)劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場(chǎng)景的生產(chǎn)計(jì)劃,提高準(zhǔn)時(shí)交貨能力,提高產(chǎn)能和資源利用率
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: