Dauersteuerung

Dieser Abschnitt bietet Werkzeuge, um die Dauer einer Aufgabe festzulegen, indem Sie das Startdatum und die Anzahl der Tage auswählen, die sie umfasst.

gantt.config.lightbox.sections=[
    {name:"description", height:70, map_to:"text", type:"textarea", focus:true},
    {name:"time",        height:72, map_to:"auto", type:"duration"} ];

Related sample: Basic initialization

Initialisierung

Standardmäßig enthält das Lightbox ein Dauer-Steuerelement. Wenn Sie ein weiteres hinzufügen möchten, gehen Sie wie folgt vor:

1) Fügen Sie eine neue Sektion zur Lightbox-Konfiguration hinzu:

gantt.config.lightbox.sections=[
    {name:"description", height:70, map_to:"text", type:"textarea",focus:true},
    {name:"time2",       height:72, map_to:"auto", type:"duration"},     {name:"time",        height:72, map_to:"auto", type:"duration"}
];

2) Weisen Sie der neuen Sektion ein Label zu:

gantt.locale.labels.section_time2 = "Tatsächliche Dauer";

Eigenschaften

Hier sind einige wichtige Eigenschaften, die Sie verwenden können, wenn Sie mit dem time-Steuerelement arbeiten. Eine vollständige Liste finden Sie hier:

name - (string) der Name der Sektion
height - (number) Höhe der Sektion
map_to - (string,object) "auto" oder ein Objekt, spezifiziert die Daten-Eigenschaft(en), die mit der Sektion verknüpft sind
formatter - (object) eine Instanz des durationFormatter Objekts
type - (string) spezifiziert den Sektionstyp
focus - (boolean) wenn auf true gesetzt, erhält die Sektion den Fokus, wenn das Lightbox geöffnet wird
readonly - (boolean) wenn auf true gesetzt, wird die Sektion schreibgeschützt
year_range - (array,number) definiert den Bereich für den Jahresauswahl. Sie können es auf zwei Arten konfigurieren:
- year_range: [2005, 2025] - reicht von 2005 bis 2025
- year_range: 10 - reicht von [aktuelles Jahr - 10 Jahre; aktuelles Jahr + 10 Jahre]
single_date - (boolean) wenn auf true gesetzt, wird nur der Startdatum-Auswahl angezeigt. Aufgaben werden dann ausschließlich durch ihr Startdatum definiert und haben keine Dauer. Dies ist hauptsächlich nützlich für Meilensteine.
time_format - (string) bestimmt die Reihenfolge der Datum-Zeit-Auswähler

Konfigurieren von Datum-Zeit-Auswählern

Sie können die Auswähler im Abschnitt "Zeitperiode" anpassen, indem Sie die time_format Eigenschaft verwenden. Erfahren Sie mehr in der Dokumentation Datumsformat-Spezifikation.

Hinzufügen des Zeitauswählers zum 'Zeitperiode'-Abschnitt

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"time",type:"duration",map_to:"auto",time_format:["%d","%m","%Y","%H:%i"]}];

Das time_format Array unterstützt die folgenden Mitglieder:

"%d" - Tagesauswahl
"%m" - Monatsauswahl
"%Y" - Jahresauswahl
"%H:%i" - Zeitauswahl (Format wird mit der time_picker Vorlage definiert)

Sie können die Reihenfolge und die Anzahl dieser Mitglieder im Array ändern, aber das Datenformat muss unverändert bleiben. Zum Beispiel:

// Zeit kommt zuerst
time_format:["%H:%i", "%m", "%d", "%Y"] 
// Monat kommt zuerst
time_format:["%m","%d", "%Y", "%H:%i"]
// Jahresauswahl wird entfernt
time_format:["%H:%i", "%m", "%d"]
// falsches Beispiel
time_format:["%H:%i", "%M", "%d", "%Y"] //"%m" wurde fälschlicherweise durch "%M" ersetzt

Zuordnung zu benutzerdefinierten Start-/Enddatum-Zeit-Eigenschaften

Standardzuordnung

Normalerweise sind die Zeit- und Dauersteuerungen mit den Standard-Eigenschaften 'start_date' und 'end_date' verknüpft, indem map_to auf "auto" gesetzt wird (map_to:"auto").

Benutzerdefinierte Zuordnung

Wenn Sie Steuerungen mit benutzerdefinierten Datumseigenschaften (anstatt 'start_date' und 'end_date') verknüpfen müssen, können Sie die Objektnotation für die map_to Eigenschaft verwenden:

gantt.config.lightbox.sections = [
    {name: "description", height: 72, type: "textarea", map_to:"text", focus: true},
    {name: "time",        height: 72, type: "duration", map_to:"auto"},
    {name: "baseline",    height: 72, type: "duration",      map_to:{start_date:"planned_start",end_date:"planned_end"}} ];

Related sample: Display baselines

Bei Verwendung als Objekt umfasst map_to drei Eigenschaften:

start_date - Name der Eigenschaft, um das Startdatum aus der Eingabe zu speichern
end_date - optional, Name der Eigenschaft, um das Enddatum aus der Eingabe zu speichern
duration - optional, Name der Eigenschaft, um die Dauer aus der Eingabe zu speichern

Wenn eine Eigenschaft nicht angegeben ist, wird die Steuerung auf die zugehörige obligatorische Datumseigenschaft zurückgesetzt.

Umschalten der Sektionssichtbarkeit

Sie können die Sichtbarkeit der Dauer-Sektion steuern, indem Sie type:"duration_optional" und button: true bei der Konfiguration der Lightbox-Sektion setzen:

gantt.config.lightbox.sections = [
  {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
  {name: "time", map_to: "auto", button: true, type: "duration_optional"} ];

Zusätzlich, setzen Sie Labels für die beiden Zustände des Buttons:

gantt.locale.labels.time_enable_button = 'Planen';
gantt.locale.labels.time_disable_button = 'Nicht planen';

Ein Umschaltknopf erscheint neben der Sektion, der es Ihnen ermöglicht, sie anzuzeigen oder zu verbergen. Wenn sichtbar, verhält sich die Sektion wie type:"duration".

Wenn der Knopf ausgeschaltet wird, verschwindet die Sektion ohne sofortige Änderungen. Beim Speichern werden die mit der Dauersteuerung über map_to verknüpften Aufgabeneigenschaften auf null gesetzt.

gantt.getTask(1);
 
// Rückgabewert
{
    id: '1', text: 'Task #1', unscheduled: true, 
    duration: 0, parent: '10',
    end_date: null, start_date: null,
    ...
}

Dieses Feature ist nützlich, um Aufgaben als nicht geplant zu markieren oder um Baselines bestimmter Aufgaben direkt aus der Benutzeroberfläche auszublenden. Schauen Sie sich die verwandten Beispiele an:

Related sample: Ungeplante Aufgaben

Related sample: Baselines

Zurück nach oben