columns

konfiguriert die Spalten der Tabelle

GridColumn[] columns;

Example

// Standard-Spaltendefinition
gantt.config.columns=[
    {name:"text",       label:"Aufgabenname",   tree:true, width:'*' },
    {name:"start_date", label:"Startzeit", align: "center" },
    {name:"duration",   label:"Dauer",  align: "center" },
    {name:"add",        label:"" }
];
gantt.init("gantt_here");

Related samples

Progress lightbox

Details

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

align? - (string) - legt die horizontale Ausrichtung des Titels fest. Mögliche Werte: 'left', 'center', oder 'right'
hide? - (boolean) - blendet eine Spalte aus oder ein (PRO)
label? - (string | number) - spezifiziert den Titel der Spalte
max_width? - (number) - legt die maximale Spaltenbreite bei Größenänderungen fest
min_width? - (number) - legt die minimale Spaltenbreite bei Größenänderungen fest
name? - (string | number) - definiert die ID der Spalte. Der Name 'add' ermöglicht es, eine Spalte mit dem '+'-Zeichen hinzuzufügen
resize? - (boolean) - ermöglicht die Größenänderung einer Spalte durch Ziehen des Spaltenrandes (PRO)
sort? (task1, task2): number - (boolean | string | Function) - die Konfiguration der Sortierung nach einem Klick auf die Spaltenüberschrift. Wenn die Eigenschaft auf false gesetzt ist, ist die Sortierung deaktiviert. Sie können auch eine andere Aufgabenproperty im string setzen, 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 zum Rendern einer Zelle in das DOM. Die Funktion nimmt ein Aufgabenobjekt und das DOM-Element der Grid-Zelle als Parameter und kann eine Komponente des Frameworks zurückgeben. Weitere Details hier
- task - (Task) - das Task-Objekt
- node - (HTMLElement) - das HTML-Element der Grid-Zelle
editor? - (object) - angehängter Inline-Editor
- type - (string) - der Typ des Inline-Editors
- map_to - (string) - spezifiziert, welche Eigenschaft der Aufgabe durch den Inline-Editor aktualisiert werden soll
- min? - (Date | number) - minimaler Wert für die Datums- und Dauerarten
- max? - (Date | number) - maximaler Wert für die Datums- und Dauerarten
- options? - (Array <any>) - ein Array mit den Optionen für die Auswahltypen
- formatter? - (DurationFormatter | LinkFormatter) - Formatter für die Datums- und Vorgängerarten

Die Breite der Grid-Spalten hängt von zwei Attributen ab: der width der Spalte und grid_width. Wenn die Summe der Breiten der Spalten nicht der Breite des Grids entspricht, ändert Gantt eines der Parameter.

Bei der Initialisierung des Gantt über gantt.init() hat die width der Spalte Priorität.
Bei der Darstellung des Gantt über gantt.render() hat die grid_width Priorität.
Related sample: Anpassung der Spaltenbreite
Bei der Initialisierung des Gantt über gantt.init() und wenn die Breite der Spalte nicht angegeben ist oder auf '*' gesetzt ist, hat die grid_width Priorität.
Related sample: Anpassung der Spaltenbreite

Das template-Attribut ist eine Funktion, die ein Datenobjekt als Parameter entgegennimmt und die endgültige Datenvorlage zurückgibt. Die Funktionsdefinition ermöglicht es, nahezu jeden Inhalt darzustellen.

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