Multiselect

Eine Gruppe von Kontrollkästchen.

Hinweis

Aktivieren Sie die Multiselect-Erweiterung, um die Steuerung in der Lightbox zu verwenden

scheduler.plugins({
    multiselect: true /*!*/
});

scheduler.locale.labels.section_userselect = "Participants";
 
scheduler.config.lightbox.sections = [    
    { name:"description", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("users"), vertical:"false" },
    { name:"time", height:72, type:"time", map_to:"auto"}    
];

Multiselect-Steuerung in der Lightbox

Initialisierung

Um die Multiselect-Steuerung zur Lightbox hinzuzufügen, befolgen Sie diese Schritte:

1. Aktivieren Sie die 'multiselect'-Erweiterung auf der Seite:

scheduler.plugins({
    multiselect: true
});

2. Fügen Sie den Abschnitt zur Lightbox-Konfiguration hinzu:

scheduler.config.lightbox.sections = [
    { name:"description", ... },
    { name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("user_id"), vertical:false },
    { name:"time", ...}
];

3. Setzen Sie die Bezeichnung für den Abschnitt:

scheduler.locale.labels.section_userselect = "Participants";

Multiselect-Steuerung in der Lightbox

Eigenschaften

Die folgenden Eigenschaften sind überwiegend wichtig und werden üblicherweise für das 'multiselect'-Steuerelement festgelegt (siehe vollständige Liste hier hier):

name	(string) Name des Abschnitts
height	(number) Höhe des Abschnitts
map_to	(string) der Name einer Dateneigenschaft, die dem Abschnitt zugeordnet wird
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) der Typ der Abschnittssteuerung
options	(array von Objekten) definiert die Auswahloptionen der Steuerung (für 'select', 'multiselect', 'radio', 'combo'-Steuerungen). Jedes Objekt im Array gibt eine einzelne Option an und besitzt diese Eigenschaften: key - (string) die Option-ID. Dieses Attribut wird mit der Eigenschaft der Ereignisdaten verglichen, um Optionen Ereignissen zuzuordnen label - (string) die Bezeichnung der Option
script_url	(string) der Pfad zum serverseitigen Skript, das die Optionen des Multiselect lädt. Wird nur im dynamischen Modus verwendet. Optional
vertical	(boolean) gibt an, ob Multiselect-Schaltflächen vertikal (true) oder horizontal (false) angeordnet werden sollen (für die 'multiselect'- und 'radio'-Steuerungen)
delimiter	(string) legt das Trennzeichen fest, das verwendet wird, um Werte des Multiselect zu trennen. Falls diese Eigenschaft nicht gesetzt ist, wird die Konfiguration section_delimiter angewendet

Das Steuerelement mit Daten befüllen

Im Allgemeinen sollten Sie, um Werte für die Multiselect-Schaltflächen festzulegen, den Parameter [options] verwenden:

scheduler.config.lightbox.sections = [
    {   name:"userselect", type:"multiselect", 
        ...
        options:[
            { key: 1, label: 'George' },
            { key: 2, label: 'Nataly' },
            { key: 3, label: 'Diana' },
            { key: 4, label: 'Adam' }
    ]},
    ...
];

Elemente im Parameter [options] müssen zwei Pflicht-Eigenschaften besitzen:

• key - die Option-ID
• label - die Option-Bezeichnung

Checkboxen vom Server befüllen

Um Checkbox-Werte vom Server abzurufen, müssen Sie die Methode serverList verwenden:

scheduler.config.lightbox.sections = [
    {name:"description", ...},
    { name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("users"), vertical:"false" },
    {name:"time", ...}
];

scheduler.load("api/data");

wobei die api/data ein serverseitiges Skript ist (guides/server-integration.md), das Ereignisse lädt, die dem Scheduler hinzugefügt wurden, und eine Sammlung der Werte der Multiselect-Schaltflächen liefert, wie hier in den Beispielen der Datenformate gezeigt:

//response
{ 
   "data":[
      {
          "id":"1",
          "start_date":"2019-03-02 00:00:00",
          "end_date":"2019-03-04 00:00:00",
          "text":"dblclick me!",
          "user_id":"1,2"
      },
      {
          "id":"2",
          "start_date":"2019-03-09 00:00:00",
          "end_date":"2019-03-11 00:00:00",
          "text":"and me!",
          "user_id":"2,3"
      }
   ], 
   "collections": {                         
      "users":[                          
         {"value":"1","label":"Lisa"},    
         {"value":"2","label":"Bob"},   
         {"value":"3","label":"Mike"}    
      ]                                     
   }                                        
}

Hinweis

Hinweis: Sie können die updateCollection-Methode verwenden, um die Liste der abzurufenden Optionen zu aktualisieren

const oldOptions = scheduler.serverList("users").slice();
scheduler.updateCollection("users", [
         {"value":"4","label":"John"},    
         {"value":"5","label":"Paul"},   
         {"value":"6","label":"Ringo"},   
         {"value":"7","label":"George"}
]);

Dynamisches Nachladen

Im statischen Modus werden alle Optionen der Ereignisparameter als eigenständiges Feld in der Datenbank gespeichert, und Sie können dieses Feld später verwenden, um Ihre eigene Logik zu erstellen. Es eröffnet zusätzliche Möglichkeiten, erfordert jedoch mehr Abfragen, um alle Optionen zu laden.

Im dynamischen Modus wird nichts Zusätzliches gespeichert. Optionen werden nach Bedarf geladen. Das verringert die Anzahl der Abfragen, schaltet jedoch die Erstellung jeglicher Logik aus.

Auf Serverseite benötigen Sie Code, der dem Folgenden ähnelt:

Um den dynamischen Modus zu aktivieren, sollten Sie neben den options auch die Eigenschaft script_url verwenden:

scheduler.config.lightbox.sections = [
    {name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("user_id"),
    script_url:'api/options'},
    ...
];

wobei api/options das folgende JSON zurückgibt:

[                          
    {"value":"1","label":"Lisa"},    
    {"value":"2","label":"Bob"},   
    {"value":"3","label":"Mike"}    
]