Beispiele Forum Unterstützung
Dokumentation
StartAnleitungenEinrichten des Rasters

Spezifizieren von Spalten

Sie können die Spalten des Grids mit dem Parameter columns einrichten.

// Standarddefinition der Spalten
gantt.config.columns = [
    {name:"text",       label:"Aufgabenname",   width:"*", tree:true },
    {name:"start_date", label:"Startzeit", align:"center" },
    {name:"duration",   label:"Dauer",  align:"center" },
    {name:"add",        label:"",           width:44 }
];

Sehen Sie sich dieses Video-Tutorial für eine detaillierte Anleitung zur Konfiguration von Grid-Spalten an:

Übersicht

Das Grid enthält standardmäßig 4 Spalten:

  1. Aufgabenname
  2. Startdatum
  3. Dauer
  4. '+'-Spalte, eine spezielle Spalte mit dem Attribut <code>name="add"</code>. Diese Spalte zeigt einen '+'-Button zum Hinzufügen von Unteraufgaben.

Sie müssen den Parameter columns nicht explizit setzen, um die Standardspalten zu verwenden.

Der Parameter columns ist ein Array, in dem jedes Objekt eine einzelne Spalte definiert. Um beispielsweise 5 Spalten zum Grid hinzuzufügen—'Aufgabe', 'Startdatum', 'Enddatum', 'Inhaber', 'Fortschritt'—können Sie sie wie folgt definieren:

gantt.config.columns =  [
    {name:"text",       label:"Aufgabenname",   tree:true, width:"*" },
    {name:"holder",     label:"Inhaber",    align:"center" },
    {name:"start_date", label:"Startzeit", align:"center" },
    {name:"end_date",   label:"Enddatum",   align:"center" },
    {name:"progress",   label:"Fortschritt",    align:"center" },
];
 
gantt.init("gantt_here");

Hier sind 'text', 'holder', 'start_date', 'end_date' und 'progress' Datenattributnamen.

Enddatum von Aufgaben anzeigen

Wenn Ihre Aufgabendaten Start- und Enddaten in Formaten wie "%Y-%m-%d" oder "%d-%m-%Y" (ohne Stunden-Minuten-Angaben) enthalten, könnte die Standardformatierung nicht die erwarteten Ergebnisse liefern. Weitere Informationen zum Umgang mit Enddaten finden Sie im Artikel Task end date display & Inclusive end dates.

Den "Hinzufügen"-Button für bestimmte Aufgaben ausblenden

Wenn Sie verhindern möchten, dass Benutzer Unteraufgaben zu bestimmten Aufgaben hinzufügen, können Sie den 'Hinzufügen'-Button mit CSS ausblenden.

  1. Weisen Sie jeder Aufgabenzeile eine CSS-Klasse mit dem Template grid_row_class zu:
gantt.templates.grid_row_class = function( start, end, task ){
    if ( task.$level > 1 ){
        return "nested_task"
    }
    return "";
};
  1. Verwenden Sie CSS, um den 'Hinzufügen'-Button für Zeilen mit der zugewiesenen Klasse auszublenden:
.nested_task .gantt_add{
    display: none !important;
}

Related sample:  Predefined Project Structure

Breite

Um die Breite einer Spalte zu steuern, setzen Sie das width-Attribut im Objekt der Spalte:

gantt.config.columns =  [
    {name:"text",       label:"Aufgabenname",   width:"*", tree:true },
    {name:"start_date", label:"Startzeit", width:150 },
    {name:"duration",   label:"Dauer",  width:120 }
];
gantt.init("gantt_here");

Die Verwendung des '*' Werts lässt eine Spalte den gesamten verbleibenden Platz einnehmen.

Beachten Sie, dass die Breite der Grid-Spalte von zwei Attributen abhängt: der width der Spalte und der Einstellung grid_width. Wenn ihre kombinierten Breiten nicht der Breite des Grids entsprechen, passt Gantt eine von ihnen an.

Min/Max Spaltenbreite

Sie können die Größenänderung der Spalten mit den Eigenschaften min_width und max_width begrenzen:

gantt.config.columns =  [
 {name:"text", label:"Aufgabenname", width:"*", min_width: 150, max_width:300, tree:true},
 {name:"start_date", label:"Startzeit", width:150 },
 {name:"duration",   label:"Dauer",   width:120 }
];
gantt.init("gantt_here");

Die min_width-Eigenschaft einer Spalte hat Vorrang vor der Eigenschaft min_grid_column_width von Gantt.

Minimale Grid-Breite beim Resizing

Die minimale Breite für das Grid beim Resizing wird durch die Option gantt.config.min_grid_column_width gesteuert. Diese definiert die kleinste Breite, auf die jede Spalte beim Resizing des Grids schrumpfen kann:

gantt.config.columns =  [
    {name:"text",       label:"Aufgabenname",  width:150, tree:true },
    {name:"start_date", label:"Startzeit", width:100 },
    {name:"duration",   label:"Dauer",   width:50 },
   // {name:"add",        label:"",           width:44 }
];
gantt.config.min_grid_column_width = 30; // das Grid kann auf 90 px verkleinert werden
 
gantt.init("gantt_here");

Related sample:  Minimal grid width

Beachten Sie, dass die minimale Breite des Grids beim Resizing auch von der Standard-Mindestbreite der 'add'-Spalte (standardmäßig 44) abhängt. Um das Resizing unter 44 px zu ermöglichen, setzen Sie eine benutzerdefinierte min_width für die 'add'-Spalte:

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

Datenzuordnung und Vorlagen

Standardmäßig füllt dhtmlxGantt Grid-Spalten mit Datenattributen, die den Spaltennamen entsprechen. Wenn der name einer Spalte beispielsweise auf "holder" gesetzt ist, sucht Gantt nach diesem Attribut in den eingehenden JSON-Daten und lädt seinen Wert in die Spalte.

Verwenden von Vorlagen für Spaltendaten

Wenn Sie möchten, dass eine Spalte eine Kombination aus mehreren Datenattributen anzeigt, können Sie eine benutzerdefinierte Vorlage mit dem Attribut template definieren. Beispielsweise könnten Sie eine Spalte namens "staff" erstellen und eine Vorlage verwenden, um "holder" und "progress" zu kombinieren:

gantt.config.columns =  [
    {name:"text",       label:"Aufgabenname",   tree:true, width:"*" },
    {name:"start_date", label:"Startzeit", align: "center" },
    {name:"staff",      label:"Inhaber(s)", template:function(obj){
                                return obj.holder+"("+obj.progress+")"} }
];
 
gantt.init("gantt_here");

Textausrichtung

Sie können den Text horizontal innerhalb einer Spalte mit dem Attribut align im Objekt der Spalte ausrichten:

gantt.config.columns =  [
    {name:"text",       label:"Aufgabenname",   tree:true, align:"center"},
    {name:"start_date", label:"Startzeit", align: "center" },
    {name:"duration",   label:"Dauer",  align: "center" }
];
 
gantt.init("gantt_here");

WBS-Code

Um die Gliederungsnummern (WBS-Code) von Aufgaben anzuzeigen, verwenden Sie die Methode getWBSCode in der Spaltentemplate:

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

Related sample:  Show Task WBS Codes (Outline Numbers)

WBS-Code einer Aufgabe abrufen

Die Methode getWBSCode ruft den WBS-Code für eine bestimmte Aufgabe ab. Wenn Sie beispielsweise die folgenden Aufgaben in Gantt laden:

gantt.parse({
 "tasks":[
    {"id":1, "text":"Projekt #1", "start_date":"28-03-2020", 
        "duration":"11", "parent":"0", "open":true},
    {"id":2, "text":"Aufgabe #1", "start_date":"01-04-2020", 
        "duration":"18", "parent":"1"},
    {"id":3, "text":"Aufgabe #2", "start_date":"02-04-2020", 
        "duration":"8", "parent":"1"}
 ],
 "links":[]
});

Sie können den WBS-Code für die Aufgabe mit id=3 abrufen, indem Sie das Aufgabenobjekt an die Methode übergeben. Es wird den WBS-Code als String zurückgeben:

var wbs_code = gantt.getWBSCode(gantt.getTask(3)); // -> gibt "1.2" zurück

Aufgabe anhand des WBS-Codes abrufen

Sie können ein Aufgabenobjekt abrufen, indem Sie seinen WBS-Code an die Methode gantt.getTaskByWBSCode übergeben:

var task = gantt.getTaskByWBSCode("1.2");
// => {id:"t1", text:"Aufgabe #1, unscheduled: true, duration: 1, …}

Zeitbeschränkungen für Aufgaben

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

Es ist möglich, spezifische Grid-Spalten einzuschließen, um die Art der Zeitbeschränkung für eine Aufgabe zu verwalten und, falls erforderlich, ein Beschränkungsdatum festzulegen. Diese Spalten werden durch die Namen "constraint_type" und "constraint_date" identifiziert.

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

Diese Spalten sind mit Inline-Editoren verbunden, die es Benutzern ermöglichen, den Beschränkungstyp für eine Aufgabe auszuwählen und ihr Datum direkt im Grid zu bearbeiten.

var 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 }
    ]
};
 
var constraintDateEditor = {
    type: "date", 
    map_to: "constraint_date", 
    min: new Date(2019, 0, 1), 
    max: new Date(2020, 0, 1)
};

Related sample:  Auto-Schedule From Project Start & Constraints

Größenänderung

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

Um das Ändern der Spaltengröße durch Ziehen des rechten Randes zu ermöglichen, verwenden Sie das Attribut resize in der Spaltenkonfiguration:

gantt.config.columns = [
  { name: "text", tree: true, width: "*", resize: true }, // 'resize' aktiviert
  { name: "start_date", resize: true, min_width: 100 },  // 'resize' mit 'min_width'
  { name: "duration", align: "center" },                // keine Größenänderung
  { name: "add", width: "44" }
];

Related sample:  Grid columns resize events

Um das gesamte Grid durch Ziehen seines Randes größenveränderbar zu machen, konfigurieren Sie die Option gantt.config.layout mit Grid- und Resizer-Objekten:

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", scroll: "y", id: "scrollVer" }
        ]
      },
      { view: "scrollbar", scroll: "x", id: "scrollHor", height: 20 }
    ]
};
 
gantt.init("gantt_here");

Um die Größe des Grids beim Ändern der Spaltengröße beizubehalten, setzen Sie die Option gantt.config.keep_grid_width auf true:

gantt.config.columns = [
    { name: "text", tree: true, width: "*", resize: true },
    { name: "start_date", align: "center" },
    { name: "duration", align: "center", width: 70 },
    { name: "add", width: 44 }
];
 
gantt.config.keep_grid_width = true; gantt.init("gantt_here");

Related sample:  Grid columns resize events

Ereignisse

dhtmlxGantt bietet sechs Ereignisse für die Handhabung von Größenänderungsaktionen:

  • gantt.onColumnResizeStart - wird ausgelöst, bevor die Größenänderung einer Spalte beginnt
  • gantt.onColumnResize - wird während der Größenänderung einer Spalte ausgelöst
  • gantt.onColumnResizeEnd - wird ausgelöst, nachdem die Größenänderung einer Spalte endet
  • gantt.onGridResizeStart - wird ausgelöst, bevor die Größenänderung des Grids beginnt
  • gantt.onGridResize - wird während der Größenänderung des Grids ausgelöst
  • gantt.onGridResizeEnd - wird ausgelöst, nachdem die Größenänderung des Grids endet

Sichtbarkeit

Um die Sichtbarkeit von Spalten zu steuern, verwenden Sie das Attribut hide in der Spaltenkonfiguration. Die Sichtbarkeit kann auch dynamisch durch Ändern der Eigenschaft hide und Aktualisieren des Diagramms umgeschaltet werden.

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

Wechsel zwischen Basis- und Detailansicht

gantt.config.columns = [
    { name: "text", label: "Aufgabenname", width: "*", tree: true, resize: true },
    { name: "start_date", label: "Startzeit" },
    { name: "duration", label: "Dauer", width: 60, hide: true },     { name: "planned_start", label: "Geplanter Start", hide: true },     { name: "planned_end", label: "Geplantes Ende", width: 80, hide: true },     { name: "add", label: "", width: 36 }
];
 
var show_details = false;
function toggleView() {
    show_details = !show_details;
    gantt.getGridColumn("duration").hide = !show_details;
    gantt.getGridColumn("planned_start").hide = !show_details;
    gantt.getGridColumn("planned_end").hide = !show_details;
 
    if (show_details) {
        gantt.config.grid_width = 600;
    } else {
        gantt.config.grid_width = 300;
    }
    gantt.render();
}
gantt.init("gantt_here");

Related sample:  Hiding grid columns

Ein Video-Tutorial ist verfügbar, das die Verwaltung der Spaltensichtbarkeit demonstriert:

Modifizieren von Zellen nach dem Rendern

Manchmal müssen Sie das Aussehen oder Verhalten einer Grid-Zelle nach dem Rendern anpassen. Ab v7.1 kann das onrender-Attribut in der Spaltenkonfiguration dabei helfen. Zum Beispiel:

gantt.config.columns = [
    { name: "text", tree: true, width: "*", resize: true },
    { name: "start_date", align: "center", resize: true },
    { name: "duration", align: "center", onrender: function(task, node) {
        node.setAttribute("title", task.text);
    }},
    { name: "add", width: 44 }
];

Alternativ können Sie den onrender-Callback verwenden, um externe Komponenten, wie React, in Grid-Zellen zu integrieren:

gantt.config.columns = [
    { name: "text", label: "Aufgabenname", tree: true, width: "*" },
    { name: "start_date", label: "Startzeit", align: "center" },
    { name: "duration", label: "Dauer", align: "center" },
    { 
        name: "external", label: "Element 1", align: "center",
        onrender: (item, node) => {
            return <DemoButton
                    text="Bearbeiten 1"
                    onClick={() => alert("Element als React-Komponente")}
                    />
        }
    }
];

Damit dies funktioniert, definieren Sie die Konfiguration gantt.config.external_render:

import ReactDOM from 'react-dom';
import React from 'react';
 
gantt.config.external_render = { 
    isElement: (element) => React.isValidElement(element),
    renderElement: (element, container) => ReactDOM.render(element, container)
};

Der Prozess umfasst:

  • Überprüfen, ob das Rückgabeobjekt von onrender mit isElement gültig ist.
  • Wenn gültig, das Objekt mit renderElement in den DOM rendern.

Horizontaler Scrollbalken

Um das Grid scrollbar zu machen, verwenden Sie die scrollable-Eigenschaft in der Layout-Konfiguration. Erfahren Sie mehr über das Binden von Layout-Ansichten an einen Scrollbalken.

Das Hinzufügen eines horizontalen Scrollbalkens zum Grid ermöglicht die automatische Anpassung der Spaltenbreiten beim Resizing des Grids. Lesen Sie mehr über die Aktivierung dieser Funktionalität.

gantt.config.layout = {
  css: "gantt_container",
  cols: [
   {
     width: 400,
     minWidth: 200,
     maxWidth: 600,
     rows: [
      { view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer" },       { view: "scrollbar", id: "gridScroll" }      ]
   },
   { resizer: true, width: 1 },
   {
     rows: [
      { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
      { view: "scrollbar", id: "scrollHor" }
     ]
   },
   { view: "scrollbar", id: "scrollVer" }
  ]
};

Um die Sichtbarkeit zwischen Scrollbalken, die derselben Gruppe zugeordnet sind, zu synchronisieren, verwenden Sie die Eigenschaft group:

gantt.config.layout = {
  css: "gantt_container",
  cols: [
    {
      width: 400,
      minWidth: 200,
      maxWidth: 600,
      rows: [
        { view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer" },
        { view: "scrollbar", id: "gridScroll", group: "horizontal" }       ]
    },
    { resizer: true, width: 1 },
    {
      rows: [
        { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
        { view: "scrollbar", id: "scrollHor", group: "horizontal" }       ]
    },
    { view: "scrollbar", id: "scrollVer" }
  ]
};

Wenn ein Scrollbalken in der Gruppe sichtbar ist, werden alle Scrollbalken in der Gruppe ebenfalls angezeigt.

Related sample:  Horizontal scroll inside Grid

Styling

Für Details zum Styling von Grid-Zellen, siehe den Styling-Leitfaden.

Zurück nach oben