columns

Description

Konfiguriert die Spalten der Tabelle

columns: GridColumn[]

Example

// Standard-Columns 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 }
];

gantt.init("gantt_here");

Related samples

• Progress lightbox

Details

Jedes Objekt im Array spezifiziert eine einzelne Spalte. Ein Objekt kann die folgenden Attribute annehmen:

• align? - (string) - legt die horizontale Titel-Ausrichtung fest. Mögliche Werte: 'left', 'center', oder 'right';
• hide? - (boolean) - versteckt/zeigt eine Spalte (PRO);
• label? - (string | number | any) - gibt den Titel der Spalte an;
• max_width? - (number) - setzt die maximale Spaltenbreite im Falle von Resize-Operationen;
• min_width? - (number) - setzt die minimale Spaltenbreite im Falle von Resize-Operationen;
• name? - (string | number) - definiert die Spalten-ID. Der Name 'add' ermöglicht es, eine Spalte mit dem '+' Zeichen hinzuzufügen;
• resize? - (boolean) - ermöglicht es, eine Spalte durch Ziehen der Begrenzung der Spalte zu skalieren (PRO);
• sort? (task1, task2): number - (boolean | string | Function) - die Konfiguration der Sortierung nach dem Klicken auf die Spaltenüberschrift. Wenn die Eigenschaft auf false gesetzt ist, ist das Sortieren deaktiviert. Man kann auch eine andere Task-Eigenschaft im string verwenden, um die Spalte zu sortieren, oder eine benutzerdefinierte Sortierfunktion verwenden.
  • task1 - (Task) - ein Objekt der ersten Aufgabe, die sortiert wird.
  • task2 - (Task) - ein Objekt der zweiten Aufgabe, die sortiert wird.
• template? (task): any - setzt eine Datenvorlage.
  • task - (Task) - das Task-Objekt.
• tree? - (boolean) - zeigt an, dass die zugehörige Spalte einen Baum anzeigen soll;
• width? - (number | string) - definiert die Breite der Spalte;
• onrender? (task, node): any - optional, eine Callback-Funktion zur Renderung einer Zelle in das DOM. Die Funktion nimmt ein Task-Objekt und das DOM-Element der Grid-Zelle als Parameter und kann eine Komponente des Frameworks zurückgeben. Siehe Details hier;
  • task - (Task) - das Task-Objekt.
  • node - (HTMLElement) - das HTML-Element der Grid-Zelle.
• editor? - (object) - Inline-Editor angehängt.
  • type - (string) - der Typ des Inline-Editors.
  • map_to - (string) - gibt an, welche Eigenschaft des Tasks durch den Inline-Editor aktualisiert werden soll.
  • min? - (Date | number) - minimaler Wert für Datums- und Dauer-Typen.
  • max? - (Date | number) - maximaler Wert für Datums- und Dauer-Typen.
  • options? - (Array <any>) - ein Array mit Optionen für die Select-Typen.
  • formatter? - (DurationFormatter | LinkFormatter) - Formatter für Datum- und Vorgänger-Typen.

Die Gesamtbreite der grid columns hängt sowohl von der width-Eigenschaft jeder column als auch von der grid_width ab. Stimmen diese Breiten nicht überein, passt Gantt eine von beiden an.

• Beim Initialisieren des Gantt mit gantt.init() hat die column-width Vorrang.

Hinweis

Column width priority over grid width at initialization

• Beim Rendern des Gantt mit gantt.render() hat die grid_width Vorrang.

Hinweis

sample: Grid width priority over column width during rendering

• Beim Initialisieren mit gantt.init() und wenn die Spaltenbreite fehlt oder auf '*' gesetzt ist, hat die grid_width Vorrang.

Hinweis

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

Die template-Eigenschaft ist eine Funktion, die ein Datenobjekt erhält und den anzuzeigenden Inhalt zurückgibt. Dies ermöglicht eine flexible Anpassung des column-Inhalts.

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");

Related Guides

• "Spalten festlegen"
• "How-tos" (Details zum Hinzufügen einer benutzerdefinierten column im grid)
• "How-tos" (Anleitung zum Hinzufügen eines benutzerdefinierten add(+)-Buttons)

Change log

• Die onrender-Eigenschaft wurde in v7.1 eingeführt