Arbeiten mit Gantt-Stilen

dhtmlxGantt bietet verschiedene Optionen, um das Erscheinungsbild anzupassen. Sie können entweder eine der vordefinierten Skins anwenden, um das gesamte Erscheinungsbild zu ändern, oder spezifische Elemente wie Aufgaben, Verbindungen, Skalen, Raster usw. anpassen. Diese Anleitung fasst allgemeine Anweisungen zur Gestaltung verschiedener Teile des Gantt-Diagramms zusammen, was die Navigation in der Dokumentation erleichtert. Für weitere Details zu spezifischen Elementen lesen Sie die entsprechenden Artikel.

Styling des Rasters

Der Rasterbereich kann durch die relevanten Einstellungen in Vorlagen des Grids gestaltet werden.

Styling der Rasterspaltenköpfe

Sie können das grid_header_class-Template verwenden, um benutzerdefinierte Stile auf die Rasterspaltenköpfe anzuwenden. Zum Beispiel, so ändern Sie die Hintergrundfarbe bestimmter Überschriften:

<style>
    .updColor {
        background-color: #ffeb8a !important;
    }
</style>

gantt.templates.grid_header_class = function(columnName, column) {
  if (columnName === 'duration' || columnName === 'text')
    return "updColor";
};

Hinzufügen benutzerdefinierter Elemente zu Rasterköpfen

Sie können benutzerdefinierte Elemente wie Schaltflächen, Symbole oder Eingaben in die Rasterüberschrift einfügen, indem Sie deren HTML als Wert der label-Eigenschaft in der gantt.config.columns-Konfiguration setzen:

gantt.config.columns = [
  {name:"add", label:"", width:50, align:"left" },
  {name:"text", label:"<div class='searchEl'>Task name <input id='search' type='text'"+       "placeholder='Search tasks...'></div>", width:250, tree:true},                            // andere Spalten
];

Um Suchfunktionen zu implementieren:

var inputEl = document.getElementById('search');
 
inputEl.oninput = function() {
  gantt.refreshData();
}
 
function hasSubstr(parentId) {
  var task = gantt.getTask(parentId);
  if (task.text.toLowerCase().indexOf(inputEl.value.toLowerCase()) !== -1)
    return true;
 
  var child = gantt.getChildren(parentId);
  for (var i = 0; i < child.length; i++) {
    if (hasSubstr(child[i]))
      return true;
  }
  return false;
}
 
gantt.attachEvent("onBeforeTaskDisplay", function(id, task) {
  if (hasSubstr(id))
    return true;
 
    return false;
});

Hinzufügen von Symbolen und Bildern zu Rasterköpfen

Sie können ein Bild oder Symbol zur Kopfzeile hinzufügen, indem Sie es in das innere HTML der Zelle mit der label-Eigenschaft einbetten:

var textLabel = [
    "<div class='gantt-text-label'>"+
    "<img src='http://docs.dhtmlx.com/scheduler/assets/index/icon1.png'>"+
    "<span>Text</span>" +
    "</div>"
].join("");
 
gantt.config.columns = [
    {name: "text", label:textLabel, tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true},
    {name: "duration", align: "center"},
    {name: "add", width: 44}
];

Alternativ kann CSS für das Styling verwendet werden:

.gantt_grid_head_text  {
    background-image:url('http://docs.dhtmlx.com/scheduler/assets/index/icon1.png');
    background-repeat:no-repeat;  
}

Mehrzeiliger Text in Rasterköpfen

Sehen Sie sich den Abschnitt Wie man mehrere Zeilen in der Rasterzelle/-kopfzeile anzeigt für Beispiele an.

Anpassen von Hintergrundfarben für Rasterzeilen

Sie können benutzerdefinierte Farben für Rasterzeilen mit dem grid_row_class-Template anwenden. Hier ist ein Beispiel, wie man eine bestimmte Zeile färbt:

<style>
  .updColor {
    background-color: #ffeb8a!important;  
  }
</style>

gantt.templates.grid_row_class = function(start, end, task) {
 if (task.id === 12)
    return "updColor";
};

Related sample: Coloring Grid Rows

Hervorheben von Rasterzeilen beim Überfahren

Um eine Rasterzeile beim Überfahren hervorzuheben, verwenden Sie diese Stilregeln:

.gantt_grid_data .gantt_row.odd:hover, .gantt_grid_data .gantt_row:hover,
.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
    background-color: cyan; 
}

Anpassen von Rasterspalten

Sie können das Standardaussehen von Rasterspalten mit dem template-Attribut in gantt.config.columns ändern. Diese Funktion nimmt ein Datenobjekt und gibt das endgültige Datentemplate zurück.

Ändern der Textfarbe in Rasterzeilen

Zum Beispiel können Sie verschiedene Textfarben basierend auf der Priorität der Aufgabe setzen:

gantt.config.columns=[
    {name:"text",       label:"Task name",  tree:true, width:230, template:myFunc },       {name:"start_date", label:"Start time", align: "center" },
    {name:"duration",   label:"Duration",   align: "center" }
];
 
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

Hinzufügen benutzerdefinierter Elemente zu Rasterspalten

Um Elemente wie Schaltflächen oder Eingaben hinzuzufügen, setzen Sie das HTML des Elements als Wert des template-Attributs:

var colContent = function(task) {
    return ('<i class="fa gantt_button_grid gantt_grid_edit fa-pencil"'+
                'onclick="clickGridButton(' + task.id + ', \'edit\')"></i>' +
            '<i class="fa gantt_button_grid gantt_grid_add fa-plus"'+
                'onclick="clickGridButton(' + task.id + ', \'add\')"></i>' +
            '<i class="fa gantt_button_grid gantt_grid_delete fa-times"'+
                'onclick="clickGridButton(' + task.id + ', \'delete\')"></i>');
};
 
gantt.config.columns = [
    {name: "text", tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true},
    {name: "duration", align: "center"},
    {name: "buttons", label: colHeader, width: 75, template: colContent}  ];

Kürzen langer Texte in Rasterspalten

Ab Version 7.0 können lange Texte in Rasterzeilen mit Ellipsen abgekürzt werden, indem die .gantt_tree_content CSS-Klasse neu definiert wird:

<style>
.gantt_tree_content {
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
 
gantt.init("gantt_here");

Mehrzeiliger Text in Rasterzellen

Beispiele sind im Abschnitt Wie man mehrere Zeilen in der Rasterzelle/-kopfzeile anzeigt verfügbar.

Styling der Skala

Der Skalenbereich der Zeitleiste kann mit den bereitgestellten Templates gestaltet werden.

Styling von Skalenzeilen

Sie können die Skalenzeile mit dem scale_row_class-Template gestalten. Zum Beispiel, um eine Hintergrundfarbe zu setzen:

<style>
  .updColor {
    background-color: #ffeb8a !important;   
  }
</style>

gantt.templates.scale_row_class = function(scale) {           
    return "updColor";
}

Styling von Skalenzellen

Spezifische Zellen in der Skala können mit dem scale_cell_class-Template gestaltet werden. Zum Beispiel können Sie Wochenenden in der Zeitleiste färben:

gantt.templates.scale_cell_class = function(date) {
    if (date.getDay() === 0 || date.getDay() === 6) {
        return "updColor";
    }
};

Für weitere Details siehe die Artikel Einrichten von Skalen und Hervorheben von Zeitfenstern.

Subskalen-Styling

Sie können einen neuen Stil für die Subskala mit dem css-Attribut der scales-Eigenschaft definieren. Zum Beispiel, um Wochenenden zu färben:

<style type="text/css">
    .weekend {
        background: #F0DFE5 !important;
    }
</style>

var daysStyle = function(date) {
    var dateToStr = gantt.date.date_to_str("%D");
    if (dateToStr(date) === "Sun" || dateToStr(date) === "Sat")  return "weekend";
 
    return "";
};
 
gantt.config.scales = [
    {unit:"day", format:"%D", css:daysStyle }
];

Related sample: Multiple scales

Styling von Aufgaben

Sie können das Erscheinungsbild von Aufgaben mit den Zeitleisten-Templates anpassen.

Styling der Aufgabenleiste

Das task_class-Template ermöglicht es Ihnen, die Stile von Aufgaben anzupassen. Zum Beispiel können Sie das Erscheinungsbild basierend auf dem Fortschritt der Aufgabe ändern:

gantt.templates.task_class = function(start, end, task) {
    if (task.progress > 0.5) {
        return "";
    } else {
        return "important";
    }
};

Styling des Textes auf der Aufgabenleiste

Das task_text-Template ermöglicht Inline-Stile für den Text auf der Aufgabenleiste. Zum Beispiel:

gantt.templates.task_text = function(start, end, task) {
  if (task.id === 12)
    return "<span style='color:red'>"+task.text+"</span>";
 
  return task.text;
};

Hinzufügen benutzerdefinierter Elemente zu Aufgabenleisten

Sie können benutzerdefinierte Elemente wie Schaltflächen in Aufgabenleisten einfügen:

gantt.templates.task_text = function(start, end, task) {  
  return task.text + " <button>Text</button>";    
};

Festlegen des Stils mit Eigenschaften des Aufgabenobjekts

Sie können das Erscheinungsbild von Aufgaben anpassen, indem Sie benutzerdefinierte Eigenschaften wie color, textColor und progressColor zur Aufgabenobjekt-Konfiguration hinzufügen. Hier ist ein Beispiel:

var tasks = {
  data:[
     {id:1, text:"Project #1", start_date:"01-04-2013", duration:18, color:"red"},
     {id:2, text:"Task #1", start_date:"02-04-2013", 
        duration:8, color:"blue", parent:1}
   ]
};
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.getTask(1).color = "red"

Für weitere Details lesen Sie den Artikel Aufgabenfärbung.

Anpassen der Aufgabenleisten über das Lightbox

Sie können Farboptionen vordefinieren und sie in die Lightbox-Konfiguration aufnehmen, um die Hintergrund- oder Textfarben von Aufgaben festzulegen:

var colors = [
    {key:"", label:"Default"},
    {key:"#4B0082",label:"Indigo"},
    {key:"#FFFFF0",label:"Ivory"},
    {key:"#F0E68C",label:"Khaki"}
    // weitere Farben
];
 
gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"priority", height:22, map_to:"color", type:"select", options:colors},
    {name:"textColor", height:22, map_to:"textColor", type:"select", options:colors},
    {name:"time", type:"duration", map_to:"auto"}
];

Styling der Zeilen im Zeitleistenbereich

Die task_row_class API ermöglicht es Ihnen, die Zeilenfarben im Zeitleistenbereich zu ändern, die hinter den Aufgaben erscheinen.

gantt.templates.task_row_class = function(start, end, task){
  if(task.id == 12)
    return "updColor";
};

Related sample: Custom tree formatting

Hervorheben von Zeitleistenzellen

Sie können das timeline_cell_class-Template verwenden, um bestimmte Zeitleistenzellen, wie Wochenenden, durch Anwenden benutzerdefinierter CSS-Klassen hervorzuheben:

<style>
    .weekend{
        background: #f4f7f4;
    }   
</style>

gantt.templates.timeline_cell_class = function(item,date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend"
    }
};

Related sample: Highlighting weekends

Für mehr dazu, lesen Sie Hervorheben von Zeitfenstern.

Anzeigen externer Elemente (Baselines, Deadlines usw.)

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

Sie können zusätzliche Elemente wie Baselines oder Deadlines im Gantt-Diagramm anzeigen, indem Sie eine neue Ebene mit der addTaskLayer-Methode erstellen. Die Methode nimmt eine Funktion, die ein DOM-Element erzeugt oder false zurückgibt, um es zu verbergen.

gantt.addTaskLayer(function myNewElement(task) {
    var el = document.createElement('div');
    // Ihr Code
    return el;
});

Beispiele umfassen:

Baselines

Related sample: Display baselines
Deadlines

Related sample: Displaying deadlines

Mehr zu diesem Thema finden Sie in Benutzerdefinierte Elemente im Zeitachsenbereich.

Aufgaben-Tooltips

Tooltips erleichtern das Anzeigen von Aufgabeninformationen in einem kompakten Format.

Durch Aktivieren des Tooltip-Plugins werden Aufgaben automatisch mit Standard-Tooltips versehen.

Anpassen des Tooltip-Textes

Um den Inhalt des Tooltips anzupassen, verwenden Sie das tooltip_text-Template:

gantt.templates.tooltip_text = function(start,end,task){
    return "<b>Task:</b> "+task.text+"<br/><b>Duration:</b> " + task.duration;
};

Weitere Details sind in Tooltips für Gantt-Elemente verfügbar.

Styling von Verbindungen

Styling von Abhängigkeitslinien

Sie können das Erscheinungsbild von Abhängigkeitslinien mit dem link_class-Template anpassen:

gantt.templates.link_class = function(link){
    return "";
};

Related sample: Link styles

Weitere Informationen finden Sie in Links-Färbung und -Stil.

Färben von Verbindungen über die Eigenschaften des Verbindungsobjekts

Sie können auch eine benutzerdefinierte Farbe für Abhängigkeitsverbindungen definieren, indem Sie die color-Eigenschaft zum Verbindungsobjekt hinzufügen:

var tasks = {
  data:[
     // Aufgaben-Konfiguration
  ],
  links:[
     {id:1, source:1, target:2, type:"1", color:"red"}, 
     {id:2, source:2, target:3, type:"0", color:"blue"}
  ]
};
 
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.getLink(2).color = "blue";

Für weitere Details, lesen Sie Links-Färbung und -Stil.

Link-Farbe beim Überfahren

Sie können das Erscheinungsbild von Abhängigkeitsverbindungen beim Überfahren mit CSS ändern:

.gantt_task_link:hover .gantt_line_wrapper div{
    box-shadow: 0 0 5px 0 yellowgreen;
    background: yellowgreen
}
 
.gantt_task_link:hover .gantt_link_arrow_left,
.gantt_task_link:hover .gantt_link_arrow_right{
    border-left-color: yellowgreen !important;
    border-right-color: yellowgreen !important;
}

Related sample: Link color on hover

Weitere Details finden Sie in Links-Färbung und -Stil.

Popups für Abhängigkeitsverbindungen

Das drag_link_class-Template ermöglicht das Styling des Popups, das beim Ziehen einer Abhängigkeitslinie erscheint. Sie können die Hintergrund- und Textfarben anpassen:

<style>
  .gantt_link_tooltip{color:red; background-color:yellow} 
</style>

gantt.templates.drag_link_class = function(from, from_start, to, to_start) {
    return "gantt_link_tooltip" ;
};

Weitere Details sind in Vorlagen für Abhängigkeitsverknüpfungen verfügbar.

Bearbeiten von Verbindungswerten über die Benutzeroberfläche

Obwohl es keine integrierte Benutzeroberfläche zum Bearbeiten von Abhängigkeitsverbindungen gibt, können Sie eine benutzerdefinierte Benutzeroberfläche erstellen, wie im dedizierten Artikel beschrieben.

Styling des Quick-Info-Popups

Der Stil des Quick-Info-Popups kann mit quick_info_class angepasst werden. Zum Beispiel können Sie benutzerdefinierte Stile auf die Popups spezifischer Aufgaben anwenden:

<style>
  .updColor{
    background-color:#ffeb8a!important;
  }
  .updColor .gantt_cal_qi_title{
    background-color:#ffeb8a!important;
  }
</style>

gantt.templates.quick_info_class = function(start, end, task){ 
  if(task.id == "12")
    return "updColor";
 
    return ""
};

Zurück nach oben