任务的基本操作
本章介绍如何处理任务的基本操作:动态创建、删除和更新任务属性。
添加新任务
要向甘特图添加新任务,请使用 addTask 方法:
var taskId = gantt.addTask({
id:10,
text:"Project #1",
start_date:"02-09-2020",
duration:28
});
限制在特定层级添加任务
如果你想阻止用户在某些层级的任务下添加子任务(或基于其他条件),一种简单的方法是通过 CSS 隐藏"添加"按钮。
你可以通过 grid_row_class 模板为每一行任务分配一个 CSS 类:
gantt.templates.grid_row_class = function( start, end, task ){
if ( task.$level > 1 ){
return "nested_task"
}
return "";
};
然后为这些行隐藏"添加"按钮:
.nested_task .gantt_add{
display: none !important;
}
更新任务属性
要动态更新任务对象的属性,请使用 updateTask 方法:
var task = gantt.getTask(10);//->{id:10,text:"Task #10",start_date:"02-09-2020",...}
task.text = "Task #10_1";/*!*/
gantt.updateTask(10); /*!*/
当启用 Data Processor 时,调用 updateTask() 会将更改发送到服务器。
任务更新后,会触发 onAfterTaskUpdate 事件。这可能会引发其他更新,例如如果启用了该功能,则自动调度任务及其后续任务。
如果只需要进行界面刷新而不需要将数据发送到服务器,可以使用 refreshTask() 方法替代 updateTask():
var task = gantt.getTask(10);//->{id:10,text:"Task #10",start_date:"02-09-2020",...}
task.text = "Task #10_1";
gantt.refreshTask(10);
重绘任务
要重绘甘特图中的所有任务,请使用 refreshData 方法:
var task = gantt.getTask(10);//->{id:10,text:"Task #10",start_date:"02-09-2020",...}
var task2 = gantt.getTask(11);//->{id:11,text:"Task #11",start_date:"05-09-2020",...}
task.text = "Task #10_1"; /*!*/
task2.text = "Task #11_1";/*!*/
gantt.refreshData(); /*!*/