Konfiguration der Baumspalte

Wenn Sie nach baumbezogenen Methoden suchen, können Sie den Artikel Aufgabe Eltern/Kind durchsuchen.

Erweitern/Reduzieren eines Aufgabenbereichs

• Um einen Aufgabenbereich zu erweitern, ist die Methode open nützlich:

var data = {
  tasks:[
     {id:"p_1", text:"Projekt #1", start_date:"01-04-2020", duration:18},
     {id:"t_1", text:"Aufgabe #1", start_date:"02-04-2020", duration:8,
     parent:"p_1"}
]};
gantt.open("p_1");

• Um einen Aufgabenbereich zu reduzieren, benötigen Sie die Methode close:

var data = {
  tasks:[
     {id:"p_1", text:"Projekt #1", start_date:"01-04-2020", duration:18},
     {id:"t_1", text:"Aufgabe #1", start_date:"02-04-2020", duration:8,
     parent:"p_1"}
]};
gantt.close("p_1");

Erweitern/Reduzieren mehrerer Bereiche

Wenn Sie mehrere Aufgabenbereiche gleichzeitig erweitern oder reduzieren möchten, ist der schnellste Weg, die .$open Eigenschaft für die gewünschten Aufgaben auf true (zum Erweitern) oder false (zum Reduzieren) zu setzen. Danach zeichnen Sie das Gantt-Diagramm einfach neu.

• Um alle Aufgaben zu erweitern:

gantt.eachTask(function(task){
    task.$open = true;
});
gantt.render();

• Um alle Aufgaben zu reduzieren:

gantt.eachTask(function(task){
    task.$open = false;
});
gantt.render();

Abrufen der Kinder einer Aufgabe

Um die Kinder einer Aufgabenverzweigung abzurufen, kann die Methode getChildren verwendet werden:

var data = {
  tasks:[
     {id:"p_1", text:"Projekt #1", start_date:"01-04-2020", duration:18},
     {id:"t_1", text:"Aufgabe #1", start_date:"02-04-2020", duration:8,
     parent:"p_1"}
]};
gantt.getChildren("p_1");//->["t_1"]

Für weitere baumbezogene Methoden, werfen Sie einen Blick auf den Artikel Aufgabe Eltern/Kind.

Ändern der Baum-Icons

Übergeordnete Elemente

Um das Icon für übergeordnete Elemente anzupassen, können Sie die Vorlage grid_folder verwenden:

gantt.templates.grid_folder = function(item) {
    return "<div class='gantt_tree_icon gantt_folder_" +
    (item.$open ? "open" : "closed") + "'></div>";
};

Kindelemente

Um ein Icon für Kindelemente festzulegen, steht die Vorlage grid_file zur Verfügung:

gantt.templates.grid_file = function(item) {
    return "<div class='gantt_tree_icon gantt_file'></div>";
};

Öffnen/Schließen Zeichen

Um das Icon für das Öffnen/Schließen Zeichen anzupassen, verwenden Sie die Vorlage grid_open:

gantt.templates.grid_open = function(item) {
    return "<div class='gantt_tree_icon gantt_" + 
    (item.$open ? "close" : "open") + "'></div>";
};

Einstellen des Einzugs der Kinder in einem Zweig

Sie können den Einzug der Kindaufgaben in einem Zweig anpassen, indem Sie die Vorlage grid_indent verwenden. Ändern Sie einfach die width CSS-Eigenschaft:

gantt.templates.grid_indent=function(task){
    return "<div style='width:20px; float:left; height:100%'></div>"
};

Hinzufügen von Kontrollkästchen zu Baumknoten

Wenn Sie Kontrollkästchen (oder andere HTML-Inhalte) zu Baumknoten hinzufügen möchten, ist die Vorlage grid_blank eine gute Wahl:

gantt.templates.grid_blank=function(task){
    return "<input id='ch1' type='checkbox' onClick='someFunc()'></input>"
};

Festlegen der Vorlage von Baumknoten

Um eine Vorlage für Baumknoten zu definieren, verwenden Sie das template Attribut in der Eigenschaft columns. Der Rückgabewert der template Funktion wird als inneres HTML eingefügt, sodass Sie beliebige HTML-Strukturen verwenden können.

gantt.config.columns=[
    {name:"text",       label:"Aufgabenname",  tree:true, width:230, template:myFunc },
    {name:"start_date", label:"Startzeit", align: "center" },
    {name:"duration",   label:"Dauer",   align: "center" }
];
gantt.init("gantt_here");
 
function myFunc(task){
    if(task.priority ==1)
        return "<div class='important'>"+task.text+" ("+task.users+") </div>";
    return task.text+" ("+task.users+")";
};

Related sample:  Template for tree nodes

Zurück nach oben