Aufgabentypen

Dieses Feature ist nur in der PRO-Edition verfügbar.

Es gibt drei vordefinierte Aufgabentypen, die Sie in einem Gantt-Diagramm anzeigen können (Sie können auch einen benutzerdefinierten Typ erstellen):

Um den Typ einer Aufgabe festzulegen, können Sie die type-Eigenschaft im Datenobjekt verwenden (Werte werden im types Objekt gespeichert):

Den Typ einer Aufgabe im Datensatz festlegen

var data = {
    task:[
        {id:1, text:"Projekt #1",    type:"project",    open:true},           {id:2, text:"Aufgabe #1",     start_date:"12-04-2020", duration:3, parent:1},
        {id:3, text:"Alpha-Version", type:"milestone",   parent:1,             start_date:"14-04-2020"},                                                        {id:4, text:"Aufgabe #2",     start_date:"17-04-2020", duration:3, parent:1}],
    links:[]
};

Related sample: Projects and milestones

Reguläre Aufgaben

Standardmäßig erstellt dhtmlxGantt reguläre Aufgaben (Aufgaben mit type="task").

Reguläre Aufgaben festlegen

var data = {
    tasks:[{id:2, text:"Aufgabe #1", start_date:"12-04-2020", duration:3}],      links:[]
};
//oder
var data = {
    tasks:[{id:2, text:"Aufgabe #1", start_date:"12-04-2020", duration:3,             type:"task"}],      links:[]
};

Related sample: Projects and milestones

Hier sind einige Merkmale von Aufgaben mit type="task":

Sie können einen übergeordneten und mehrere untergeordnete Aufgaben haben.
Sie können gezogen und in der Größe verändert werden.
Sie sind nicht von untergeordneten Aufgaben abhängig; zum Beispiel hat das Verschieben einer untergeordneten Aufgabe keinen Einfluss auf die Dauer oder den Fortschritt der übergeordneten Aufgabe.
Sie können in übergeordneten Projekten erscheinen. Siehe Details.
Sie können in der Zeitleiste ausgeblendet werden. Siehe Details.

Projektaufgaben

Eine Projektaufgabe beginnt automatisch, wenn die früheste untergeordnete Aufgabe beginnt, und endet, wenn die letzte untergeordnete Aufgabe endet.

Der Hauptunterschied zwischen Projekt- und regulären Aufgaben besteht darin, dass die Dauer einer Projektaufgabe auf ihren untergeordneten Aufgaben basiert und sich entsprechend anpasst.

Projektaufgaben festlegen

var data = {
    tasks:[
        {id:1, text:"Projekt #1",    type:"project",    open:true},         {id:2, text:"Aufgabe #1",    start_date:"12-04-2020", duration:3, parent:1},
        {id:3, text:"Alpha-Version", type:"milestone",   parent:1,
            start_date:"14-04-2020"}],
    links:[]
};

Related sample: Projects and milestones

Hier ist, was Sie über Aufgaben mit type="project" wissen sollten:

Sie können einen übergeordneten und mehrere untergeordnete Aufgaben haben.
Sie können nicht gezogen oder in der Größe verändert werden, es sei denn, Ziehen und Ablegen ist explizit durch die drag_project Konfiguration aktiviert.
Sie sind von untergeordneten Aufgaben abhängig, sodass Änderungen an der Zeitplanung einer untergeordneten Aufgabe die Dauer der Projektaufgabe anpassen.
Sie ignorieren die Eigenschaften start_date, end_date und duration.
Sie können nicht gezogen werden, wenn sie keine untergeordneten Aufgaben haben.
Standardmäßig wird der Projektfortschritt manuell festgelegt und hängt nicht von den Unteraufgaben ab. Für eine automatische Fortschrittsberechnung ist zusätzliche Programmierung erforderlich. Beispiele ansehen.

Um das Hinzufügen von Projektaufgaben zu ermöglichen, lesen Sie den Artikel Meilensteine. Das Zulassen von Meilensteinen stellt sicher, dass Benutzer auch Projektaufgaben hinzufügen können.

Meilensteine

Meilensteine sind Aufgaben mit null Dauer, die verwendet werden, um wichtige Daten innerhalb eines Projekts hervorzuheben (mehr Details).

Meilensteine festlegen

var data = {
    tasks:[
        {id:1, text:"Projekt #1",    type:"project",    open:true},
        {id:2, text:"Aufgabe #1",    start_date:"12-04-2020", duration:3, parent:1},
        {id:3, text:"Alpha-Version", type:"milestone",   parent:1,             start_date:"14-04-2020"}],    links:[]
};

Related sample: Projects and milestones

Meilensteine mit type="milestone" haben folgende Merkmale:

Sie können einen übergeordneten und mehrere untergeordnete Aufgaben haben.
Sie können nicht gezogen oder in der Größe verändert werden.
Ihre Dauer ist immer null.
Sie ignorieren die Eigenschaften end_date, duration und progress.
Sie können in übergeordneten Projekten erscheinen. Siehe Details.
Sie können in der Zeitleiste ausgeblendet werden. Siehe Details.

Um das Hinzufügen von Meilensteinen zu ermöglichen, lesen Sie den Artikel Meilensteine.

Spezifisches Lightbox pro Aufgabentyp

Jeder Aufgabentyp hat einzigartige Merkmale, daher ist es möglich, ein benutzerdefiniertes Detailformular (Lightbox) für jeden Typ zu konfigurieren. Diese Konfigurationen werden im lightbox Objekt gespeichert.

Die verfügbaren Konfigurationen sind:

gantt.config.lightbox.sections - für reguläre Aufgaben.
gantt.config.lightbox.project_sections - für Projektaufgaben.
gantt.config.lightbox.milestone_sections - für Meilensteine.

Die Standardeinstellungen sehen folgendermaßen aus:

gantt.config.lightbox.sections = [
    {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
    {name: "time", type: "duration", map_to: "auto"}
];
gantt.config.lightbox.project_sections= [
    {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
    {name: "type", type: "typeselect", map_to: "type"},
    {name: "time", type: "duration", readonly: true, map_to: "auto"}
];
gantt.config.lightbox.milestone_sections= [
    {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
    {name: "type", type: "typeselect", map_to: "type"},
    {name: "time", type: "duration", single_date: true, map_to: "auto"}
];

Wenn ein Aufgabentyp in der Lightbox geändert wird, wird die entsprechende Konfiguration dynamisch angewendet.

Sie können auch einen benutzerdefinierten Typ hinzufügen und eine passende Lightbox-Struktur dafür definieren.

Weitere Informationen zur Lightbox-Konfiguration finden Sie im Kapitel Einrichten des Bearbeitungsformulars.

Einen benutzerdefinierten Typ erstellen

Alle Aufgabentypen sind im types Objekt definiert. Um einen neuen benutzerdefinierten Aufgabentyp hinzuzufügen, folgen Sie diesen Schritten:

Fügen Sie dem types Objekt einen neuen Wert hinzu.
Definieren Sie spezifische Einstellungen für den neuen Typ.

Zum Beispiel, wenn Sie einen neuen Aufgabentyp namens meeting erstellen möchten, der eine reguläre Aufgabe mit einer einzigartigen Farbe und benutzerdefinierten Lightbox-Eingaben ist:

Um den meeting-Typ zu definieren und seine Lightbox anzupassen, folgen Sie diesen Schritten:

Fügen Sie den neuen Typ dem types Objekt hinzu:
```
gantt.config.types.meeting = "type_id";
```
Hier ist "meeting" der programmatische Name für den Typ, der zur besseren Lesbarkeit verwendet wird. "type_id" ist der eindeutige Typ-Identifikator, der in der Datenbank gespeichert wird.

Legen Sie ein Label für den neuen Typ im "typeselect"-Steuerelement fest:

gantt.locale.labels.type_meeting = "Meeting";

Definieren Sie eine neue Lightbox-Struktur für den **meeting**-Typ:

gantt.config.lightbox.meeting_sections = [
    {name:"title", height:20, map_to:"text", type:"textarea", focus:true},
    {name:"details", height:70, map_to: "details", type: "textarea"},
    {name:"type", type:"typeselect", map_to:"type"},
    {name:"time", height:72, type:"time", map_to:"auto"}
];
gantt.locale.labels.section_title = "Betreff";
gantt.locale.labels.section_details = "Details";

Definieren Sie einen Stil für den neuen Typ und wenden Sie ihn mit der task_class Vorlage an:

.meeting_task{
    border:2px solid #BFC518;
    color:#6ba8e3;
    background: #F2F67E;
}
.meeting_task .gantt_task_progress{
    background:#D9DF29;
}

gantt.templates.task_class = function(start, end, task){
    if(task.type == gantt.config.types.meeting){
        return "meeting_task";
    }
    return "";
};

Legen Sie eine benutzerdefinierte Textvorlage für **meeting**-Aufgaben mit der task_text Vorlage fest:

gantt.templates.task_text = function(start, end, task){
    if(task.type == gantt.config.types.meeting){
        return "Meeting: <b>" + task.text + "</b>";
    }
    return task.text;
};

Related sample: Custom task type

Benutzerdefinierte Darstellung von Aufgabentypen

Um das Erscheinungsbild bestehender Aufgabentypen anzupassen, verwenden Sie die type_renderers Option. Damit können Sie die Funktionen neu definieren, die steuern, wie verschiedene Aufgabentypen gerendert werden.

gantt.config.type_renderers["project"]=function(task, defaultRender){
    var main_el = document.createElement("div");
    main_el.setAttribute(gantt.config.task_attribute, task.id);
    var size = gantt.getTaskPosition(task);
    main_el.innerHTML = [
        "<div class='project-left'></div>",
        "<div class='project-right'></div>"
    ].join('');
    main_el.className = "custom-project";
 
    main_el.style.left = size.left + "px";
    main_el.style.top = size.top + 7 + "px";
    main_el.style.width = size.width + "px";
 
    return main_el;
};

Related sample: Classic Look

Zurück nach oben