Zum Hauptinhalt springen

Spalten festlegen

Grid-Spalten werden mit dem Parameter columns konfiguriert.

gantt_left

// Standard-Spalten-Definition
gantt.config.columns = [
    { name: "text",       label: "Task name",  width: "*", tree: true },
    { name: "start_date", label: "Start time", align: "center" },
    { name: "duration",   label: "Duration",   align: "center" },
    { name: "add",        label: "",           width: 44 }
];

Sie können sich das Video-Tutorial ansehen, das beschreibt, wie man Spalten des Grids festlegt.

Überblick​

Standardmäßig enthält das Grid vier Spalten:

  1. Aufgabenname
  2. Startdatum
  3. Dauer
  4. '+'-Spalte. Eine spezielle Spalte mit dem name="add", die das '+'-Zeichen anzeigt und es den Benutzern ermöglicht, Unteraufgaben zu einer Aufgabe hinzuzufügen.
Hinweis

Hinweis: Sie müssen den columns Parameter nicht angeben, um die Standardspalten im Grid zu zeigen.

Der columns Parameter ist ein Array, von dem jedes Objekt eine einzelne Spalte darstellt. Also beispielsweise, um 5 Spalten im Grid zu definieren: 'Task', 'Start Date', 'End Date', 'Holder', 'Progress', geben Sie den columns Parameter wie folgt an:

gantt.config.columns = [
    { name: "text",       label: "Task name",  tree: true, width: "*" },
    { name: "holder",     label: "Holder",     align: "center" },
    { name: "start_date", label: "Start time", align: "center" },
    { name: "end_date",   label: "End date",   align: "center" },
    { name: "progress",   label: "Progress",   align: "center" }
];

gantt.init("gantt_here");

wobei 'text', 'holder', 'start_date', 'end_date', 'progress' die Namen der Daten-Eigenschaften sind.

Anzeigen des Enddatums von Aufgaben​

Wenn Aufgabendaten Objekte Start- und Enddaten im Format "%Y-%m-%d" oder "%d-%m-%Y" enthalten (d. h. ohne Stunden-Minuten-Teil), können die resultierenden Daten im Standardformat Werte aufweisen, die nicht erwartet werden. Für weitere Details zur Formatierung von Enddaten lesen Sie den Artikel Task end date display & Inclusive end dates.

Ausblenden der "Add"-Schaltfläche für bestimmte Aufgaben​

Eine recht einfache Möglichkeit, zu verhindern, dass Benutzer Unteraufgaben zu bestimmten Aufgaben hinzufügen, besteht darin, die 'Add'-Schaltfläche über CSS auszublenden.

Zuerst weisen Sie jeder Aufgabenzeile eine CSS-Klasse zu, indem Sie die grid_row_class Vorlage verwenden:

gantt.templates.grid_row_class = ( start, end, task ) => {
    if ( task.$level > 1 ) {
        return "nested_task"
    }

    return "";
};

Dann blenden Sie die 'Add'-Schaltfläche für solche Zeilen aus:

.nested_task .gantt_add {
    display: none !important;
}

Zugehöriges Beispiel: Predefined Project Structure

Breite​

Um die Breite einer Spalte festzulegen, verwenden Sie das Attribut width im entsprechenden Spaltenobjekt:

gantt.config.columns = [
    { name: "text",       label: "Task name",  width: "*", tree: true },
    { name: "start_date", label: "Start time", width: 150 },
    { name: "duration",   label: "Duration",   width: 120 }
];

gantt.init("gantt_here");
Hinweis

Verwenden Sie den '*'-Wert, um die Spalte den restlichen Platz einnehmen zu lassen.

Beachten Sie, dass die Breite der Grid-Spalten von zwei Attributen abhängt: dem [width] der Spalte und [grid_width]. Wenn die Summe der Breiten der Spalten nicht der Breite des Grids entspricht, ändert Gantt einen der Parameter.

  • Bei der Initialisierung des Gantt über gantt.init() hat der [width] der Spalte Priorität.

Beispiel: Column width priority over grid width at initialization

Beispiel: Grid width priority over column width during rendering

  • Bei der Initialisierung von gantt über gantt.init() und entweder die Breite der Spalte nicht angegeben oder auf '*' gesetzt ist, hat grid_width Priorität.

Beispiel: Grid width priority when column width is undefined or set to '*' at initialization

Minimal-/Maximal-Spaltenbreite​

Die Eigenschaften min_width/max_width können verwendet werden, um die Spaltenbreite bei Größenänderungen zu begrenzen:

gantt.config.columns = [
    { name: "text",       label: "Task name",  width: "*", tree: true, min_width: 150, max_width: 300 },
    { name: "start_date", label: "Start time", width: 150 },
    { name: "duration",   label: "Duration",   width: 120 }
];

gantt.init("gantt_here");
Hinweis

Die Eigenschaft min_width einer Spalte hat Priorität gegenüber der Eigenschaft min_grid_column_width des gantt.

Minimale Grid-Breite beim Verändern der Größe​

Die minimale Breite, auf die das Grid beim Verändern der Spaltengröße reduziert werden kann, wird über die Option gantt.config.min_grid_column_width festgelegt. Die Option definiert die minimale Breite, auf die jede Spalte beim Verändern der Grid-Breite verkleinert werden kann:

gantt.config.columns = [
    { name: "text",       label: "Task name",  width: 150, tree: true },
    { name: "start_date", label: "Start time", width: 100 },
    { name: "duration",   label: "Duration",   width: 50 }
];

gantt.config.min_grid_column_width = 30; // das Grid kann auf 90 px verkleinert werden

gantt.init("gantt_here");
Hinweis

Die minimale Breite des Grids beim Verändern der Größe hängt auch von der minimalen Breite der 'add'-Spalte ab (standardmäßig 44). Um das Grid auf einen Wert kleiner als 44 px zu verkleinern, geben Sie die min_width Option im Objekt der 'add'-Spalte an:

{ name: "add", label: "", min_width: 1 }

Datenzuordnung und Vorlagen​

Standardmäßig füllt dhtmlxGantt das Grid mit Daten-Eigenschaften, die den Namen der Spalten entsprechen. Wenn Sie beispielsweise für eine Spalte name:"holder" festlegen, sucht dhtmlxGantt nach einer solchen Daten-Eigenschaft in den eingehenden JSON-Daten, und falls eine solche Eigenschaft existiert, wird sie in die Spalte geladen.

Verwendung von Vorlagen für Spalten-Daten​

Wenn Sie eine Mischung mehrerer Daten-Eigenschaften in einer Spalte darstellen möchten, können Sie jeden Namen für die Spalte verwenden, aber die Daten-Vorlage über das template-Attribut des columns Parameters festlegen. Beispielsweise können Sie für eine Spalte den Namen name:"staff" festlegen und eine Vorlagenfunktion definieren, die die Daten-Eigenschaften holder und progress in die Spalte lädt, z. B.:

gantt.config.columns = [
    { name: "text",        label: "Task name",  tree: true, width: "*" },
    { name: "start_date",  label: "Start time", align: "center" },
    { name: "staff",       label: "Holder(s)", template: (obj) => {
        return `${obj.holder} (${obj.progress})`;
    } }
];

gantt.init("gantt_here");

Textausrichtung​

Um die horizontale Ausrichtung des Textes in einer Spalte festzulegen, verwenden Sie das align Attribut im entsprechenden Spaltenobjekt:

gantt.config.columns = [
    { name: "text",       label: "Task name",  align: "center", tree: true },
    { name: "start_date", label: "Start time", align: "center" },
    { name: "duration",   label: "Duration",   align: "center" }
];

gantt.init("gantt_here");

WBS-Code​

Sie können eine Spalte hinzufügen, die die Outline-Nummern der Aufgaben (ihren WBS-Code) anzeigt. Dazu müssen Sie die getWBSCode Methode in der Spaltenvorlage verwenden.

gantt.config.columns = [
    { name: "wbs",        label: "WBS",        width: 40,  template: gantt.getWBSCode }, 
    { name: "text",       label: "Task name",  width: 170, tree: true },
    { name: "start_date", label: "Start time", width: 90,  align: "center" },
    { name: "duration",   label: "Duration",   width: 60,  align: "center" },
    { name: "add",        width: 40 }
];

Zugehöriges Beispiel: Show Task WBS Codes (Outline Numbers)

Ermitteln des WBS-Codes der Aufgabe​

Die getWBSCode Methode gibt den WBS-Code der benötigten Aufgabe zurück. Beispielsweise laden wir folgende Aufgaben in gantt:

gantt.parse({
    tasks: [
        { id: 1, text: "Project", start_date: "28-03-2025", duration: 5, open: true },
        { id: 2, text: "Task #1", start_date: "01-04-2025", duration: 3, parent: 1 },
        { id: 3, text: "Task #2", start_date: "02-04-2025", duration: 4, parent: 1 }
    ],
    links: []
});

und wir möchten den WBS-Code der Aufgabe mit der id="3" erhalten. Dafür übergeben wir das Objekt einer Aufgabe als Parameter an die getWBSCode Methode. Sie gibt einen String mit dem WBS-Code der Aufgabe zurück:

const wbsCode = gantt.getWBSCode(gantt.getTask(3)); // -> returns "1.2"

Erhalten einer Aufgabe via WBS-Code​

Sie können auch das Objekt einer Aufgabe erhalten, indem Sie ihren WBS-Code an die getWBSCode Methode übergeben:

const task = gantt.getTaskByWBSCode("1.2");
// => { id: 3, text: "Task #2", start_date: …}

Zeitliche Einschränkungen für Aufgaben​

Sie können separate Grid-Spalten hinzufügen, die es ermöglichen, den Typ der time constraint für eine Aufgabe und das Datum der Einschränkung festzulegen, falls der gewählte Typ dies erfordert. Diese Spalten tragen die Namen "constraint_type" und "constraint_date" bzw. entsprechend.

gantt.config.columns = [
    { name: "constraint_type", align: "center", width: 100, resize: true,
        editor: constraintTypeEditor, template: (task) => { //template logic }
    },
    { name: "constraint_date", align: "center", width: 120, resize: true,
        editor: constraintDateEditor, template: (task) => { //template logic }
    },
    ...
];

Die Spalten sind mit Objekten von Inline-Editoren verknüpft, die es ermöglichen, den notwendigen Typ der Einschränkung für eine Aufgabe auszuwählen und ihr Datum direkt im Grid zu bearbeiten.

const constraintTypeEditor = {
    type: "select", map_to: "constraint_type", options: [
        { key: "asap", label: gantt.locale.labels.asap },
        { key: "alap", label: gantt.locale.labels.alap },
        { key: "snet", label: gantt.locale.labels.snet },
        { key: "snlt", label: gantt.locale.labels.snlt },
        { key: "fnet", label: gantt.locale.labels.fnet },
        { key: "fnlt", label: gantt.locale.labels.fnlt },
        { key: "mso", label: gantt.locale.labels.mso },
        { key: "mfo", label: gantt.locale.labels.mfo }
    ]
};

const constraintDateEditor = {
    type: "date", 
    map_to: "constraint_date", 
    min: new Date(2025, 0, 1), 
    max: new Date(2030, 0, 1)
};

Zugehöriges Beispiel: Auto-Schedule From Project Start & Constraints

Spaltengrößen ändern​

Info

Diese Funktionalität ist nur in der PRO-Edition verfügbar

Um Benutzern die Möglichkeit zu geben, eine Spalte durch Ziehen des rechten Spaltenrandes zu vergrößern/verkleinern, verwenden Sie das resize Attribut im entsprechenden Spaltenobjekt:

gantt.config.columns = [
    { name: "text",       resize: true, tree: true, width: "*" }, // 'resize' aktiv
    { name: "start_date", resize: true, min_width: 100 }, // durch 'min_width' begrenzt
    { name: "duration",   align: "center" },              // kein Resize
    { name: "add",        width: "44" }
];

Zugehöriges Beispiel: Grid columns resize events

Um das gesamte Grid durch Ziehen des Grid-Randes resizebar zu machen, verwenden Sie die gantt.config.layout Option und geben Grid- und Resizer-Objekte mit der nötigen Konfiguration darin an.

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                { view: "grid", id: "grid", scrollX: "scrollHor",
                    scrollY: "scrollVer"
                },
                { resizer: true, width: 1 },
                { view: "timeline", id: "timeline", scrollX: "scrollHor",
                    scrollY: "scrollVer"
                },
                { view: "scrollbar", id: "scrollVer", scroll: "y" }
            ]
        },
        { view: "scrollbar", id: "scrollHor", scroll: "x", height: 20 }
    ]
};

Da Sie separate Scrollleisten für Grid und Timeline anzeigen, möchten Sie möglicherweise deren Sichtbarkeit synchronisieren, sodass beide Scrollleisten gleichzeitig sichtbar oder versteckt sind.

scrollable_grid

Es lässt sich erreichen, indem Sie beide Scrollleisten derselben Sichtbarkeitsgruppe zuordnen:

gantt.config.layout = {
    css: "gantt_container",
    cols: [
        {
            width: 400,
            minWidth: 200,
            maxWidth: 600,
            rows: [
                { view: "grid", scrollX: "gridScroll", scrollable: true,
                    scrollY: "scrollVer"
                },
                // horizontale Scrollleiste für das Grid
                { view: "scrollbar", id: "gridScroll", group: "horizontal" } 
            ]
        },
        { resizer: true, width: 1 },
        {
            rows: [
                { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
                // horizontale Scrollleiste für die Timeline
                { view: "scrollbar", id: "scrollHor", group: "horizontal" } 
            ]
        },
        { view: "scrollbar", id: "scrollVer" }
    ]
};

Wenn mindestens eine der Scrollleisten der gleichen Gruppe sichtbar ist, werden alle Scrollleisten der Gruppe sichtbar sein.

Zugehöriges Beispiel: Horizontal scroll inside Grid

Styling​

Für Informationen zum Stylen von Zellen des Grids lesen Sie Work with Gantt Styles.

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support