Select Control

Ein Dropdown-Menüelement.

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"priority", height:22, map_to:"priority", type:"select", options: [         {key:1, label: "High"},                                                       {key:2, label: "Normal"},                                                     {key:3, label: "Low"}                                                      ]},                                                                          {name:"time", height:72, type:"duration", map_to:"auto"}
];
 
gantt.locale.labels.section_priority = "Priority";

Related sample:  Select control

Initialisierung

Um das select-Steuerelement in der Lightbox einzufügen, folgen Sie diesen Schritten:

1) Fügen Sie der Lightbox-Konfiguration einen entsprechenden Abschnitt hinzu:

var opts = [
    {key:1, label: "High"},                                            
    {key:2, label: "Normal"},                                         
    {key:3, label: "Low"}                                            
];
 
gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea",focus:true},
    {name:"priority", height:22, map_to:"priority",type:"select",options:opts},                                                                           {name:"time", height:72, type:"duration", map_to:"auto"}
];

2) Weisen Sie dem Abschnitt ein Label zu:

gantt.locale.labels.section_priority = "Priority";

Related sample:  Select control

Eigenschaften

Hier sind die wichtigsten Eigenschaften, die häufig für das select-Steuerelement verwendet werden (eine vollständige Liste finden Sie hier):

• name - (string) definiert den Abschnittsnamen
• height - (number) legt die Höhe des Abschnitts fest
• map_to - (string) gibt die Daten-Eigenschaft an, die mit dem Abschnitt verknüpft ist
• type - (string) bestimmt den Typ des Abschnittssteuerungselements
• focus - (boolean) wenn true, erhält der Abschnitt den Fokus, wenn die Lightbox geöffnet wird
• options - (array) ein Array von Objekten, die die Auswahlmöglichkeiten für das Steuerelement definieren (wird für select, checkbox und radio Steuerelemente verwendet). Jedes Objekt beinhaltet:
  • key - (string) der eindeutige Bezeichner der Option, der mit den Aufgabendaten-Eigenschaften übereinstimmt
  • label - (string) der angezeigte Text für die Option
• default_value - (any) setzt einen Standardwert für das Steuerelement, wenn der Eingabewert undefiniert ist
• onchange - (function) definiert eine 'onChange'-Ereignis-Handlerfunktion für das Steuerelement

Füllen des Steuerelements mit Daten

Um Werte für das select-Steuerelement bereitzustellen, verwenden Sie den options Parameter:

gantt.config.lightbox.sections = [
    { name:"priority",height:22, map_to:"priority",type:"select",
      options: [ 
        {key:1, label: "High"},                                               
        {key:2, label: "Normal"},                                             
        {key:3, label: "Low"}                                                
    ]}                                                                    
];

Die Elemente im options Parameter benötigen zwei wesentliche Eigenschaften:

• key - der eindeutige Bezeichner für die Option
• label - der Anzeigetext für die Option

Füllen des Steuerelements mit Daten vom Server

Um Daten für das Steuerelement von einem Server zu laden, setzen Sie den options Parameter auf den Wert, der durch die serverList Methode bereitgestellt wird:

gantt.config.lightbox.sections = [
    {name:"description", ...},
    { name:"priority",map_to:"priority",type:"select",
        options:gantt.serverList("priority")},     {name:"category", map_to:"category", type:"select", 
        options:gantt.serverList("category")},     {name:"time", ...}
];
gantt.init("gantt_here");
gantt.load("/data");

Die Serverantwort von der /data URL sieht so aus:

{
  "tasks":[
    {"id":1,"text":"Project #2","start_date":"01-04-2020","duration":18,"parent":0},
    {"id":2,"text":"Task #1","start_date":"02-04-2020","duration":8,"parent":1},
    {"id":3,"text":"Task #2","start_date":"11-04-2020","duration":8,"parent":1}
  ],
  "links":[
    {"id":1,"source":1,"target":2,"type":"1"},
    {"id":2,"source":2,"target":3,"type":"0"}
  ],
  "collections": {     "priority":[
        {"value":"1","label":"Low"},
        {"value":"2","label":"Medium"},
        {"value":"3","label":"High"}
    ],
    "category":[
        {"value":"1","label":"Simple"},
        {"value":"2","label":"Complex"},
        {"value":"3","label":"Unknown"}
    ]
  }
}

Laden von Optionen über dhtmlxConnector

Hier ist ein Beispiel für die Initialisierung von dhtmlxConnector:

//data.php
<?php
    include('connector-php/codebase/gantt_connector.php');
 
    $res = new PDO("mysql:host=localhost;dbname=gantt", "root", "");
 
    $list = new OptionsConnector($res);
    $list->render_table("priorities","id","id(value),name(label)");
 
    $gantt = new JSONGanttConnector($res);
    $gantt->set_options("priority", $list);
    $gantt->render_links("gantt_links","id","source_task(source),
                    target_task(target),type");    
    $gantt->render_table("gantt_tasks","id","start_date,duration,text,progress,
                    sortorder,parent");
?>

Zurück nach oben