Dieser Abschnitt behandelt grundlegende Operationen, die Sie mit Aufgaben durchführen können, einschließlich der Erstellung oder Löschung von Aufgaben und der dynamischen Aktualisierung ihrer Eigenschaften.
Um eine Aufgabe zum Gantt-Diagramm hinzuzufügen, verwenden Sie die Methode gantt.addTask:
var taskId = gantt.addTask({
id:10,
text:"Projekt #1",
start_date:"02-09-2020",
duration:28
});
Eine effektive Methode, um zu verhindern, dass Benutzer Unteraufgaben zu Aufgaben auf bestimmten Ebenen hinzufügen (oder basierend auf anderen Bedingungen), besteht darin, den 'Hinzufügen'-Button mithilfe von CSS auszublenden.
Sie können jeder Aufgabenzeile eine CSS-Klasse zuweisen, indem Sie das Template gantt.templates.grid_row_class verwenden:
gantt.templates.grid_row_class = function(start, end, task){
if (task.$level > 1){
return "nested_task"
}
return "";
};
Anschließend wenden Sie eine CSS-Regel an, um den 'Hinzufügen'-Button für Zeilen mit der angegebenen Klasse auszublenden:
.nested_task .gantt_add{
display: none !important;
}
Related sample: Predefined Project Structure
Um eine Aufgabeigenschaft dynamisch zu aktualisieren, verwenden Sie die Methode gantt.updateTask:
var task = gantt.getTask(10);//->{id:10,text:"Task #10",start_date:"02-09-2020",...}
task.text = "Task #10_1"; gantt.updateTask(10);
Wenn der Datenprozessor aktiviert ist, löst die Methode updateTask() aus, dass Änderungen an den Server gesendet werden.
Sobald die Aufgabe aktualisiert ist, wird das Ereignis onAfterTaskUpdate ausgelöst. Dies könnte zu zusätzlichen Änderungen führen, wie z.B. der automatischen Planung der Aufgabe und ihrer Nachfolger, wenn die automatische Planung aktiv ist.
Wenn Sie nur die Änderungen neu rendern müssen, ohne Aktualisierungen auf dem Server auszulösen, verwenden Sie refreshTask() anstelle von updateTask():
var task = gantt.getTask(10);//->{id:10,text:"Task #10",start_date:"02-09-2020",...}
task.text = "Task #10_1";
gantt.refreshTask(10);
Um alle Aufgaben im Gantt-Diagramm zu aktualisieren, verwenden Sie die Methode gantt.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();
Um eine Aufgabe zu entfernen, verwenden Sie die Methode gantt.deleteTask:
gantt.deleteTask(taskId);
Die Einstellung gantt.config.cascade_delete steuert, wie verschachtelte Aufgaben gelöscht werden. Standardmäßig ist sie auf true gesetzt, was bedeutet, dass beim Löschen einer Aufgabe eine separate Anfrage an den Server für jede verschachtelte Aufgabe und jeden Link, der mit der gelöschten Aufgabe verbunden ist, gesendet wird.
Wenn Sie das Senden mehrerer Anfragen vermeiden möchten, können Sie diese Einstellung deaktivieren:
gantt.config.cascade_delete = false;
Wenn sie deaktiviert ist, sendet Gantt nur eine Anfrage, um die übergeordnete Aufgabe zu löschen, und überlässt es dem Server, die Entfernung der verschachtelten Aufgaben und Links zu handhaben.
Diese Einstellung beeinflusst die Backend-Implementierung. Weitere Details finden Sie im Artikel Server-seitige Integration.
Um alle Aufgaben aus dem Gantt-Diagramm zu entfernen, verwenden Sie die Methode gantt.clearAll:
gantt.clearAll();