Multiselect

Dieses Steuerelement stellt eine Gruppe von Checkboxen bereit.

scheduler.plugins({
    multiselect: true });
 
scheduler.locale.labels.section_userselect = "Teilnehmer";
 
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"}   
];

Related sample:  Multiselect control in the lightbox

Initialisierung

Um das Multiselect-Steuerelement im Lightbox-Editor einzubinden, gehen Sie wie folgt vor:

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

   scheduler.plugins({
       multiselect: true
   });

2. Fügen Sie die multiselect-Sektion 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. Definieren Sie die Beschriftung für die Sektion:

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

Related sample:  Multiselect control in the lightbox

Eigenschaften

Hier sind einige wichtige Eigenschaften, die häufig mit dem 'multiselect'-Steuerelement verwendet werden (die vollständige Liste finden Sie hier):

name	(string) Der Name der Sektion
height	(number) Die Höhe der Sektion
map_to	(string) Der Name der Daten-Eigenschaft, die dieser Sektion zugeordnet ist
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) Der Steuerelement-Typ für die Sektion
options	(Array von Objekten) Definiert die Auswahloptionen für das Steuerelement (gilt für 'select', 'multiselect', 'radio', 'combo' Steuerelemente). Jedes Objekt stellt eine einzelne Option mit folgenden Eigenschaften dar: key - (string) Die ID der Option. Diese wird mit der Daten-Eigenschaft des Events abgeglichen, um Optionen zuzuweisen label - (string) Die angezeigte Bezeichnung der Option
script_url	(string) Die URL des serverseitigen Skripts, das Multiselect-Optionen dynamisch lädt. Optional und nur im dynamischen Modus verwendet.
vertical	(boolean) Legt fest, ob die Multiselect-Schaltflächen vertikal (true) oder horizontal angeordnet werden (für 'multiselect' und 'radio' Steuerelemente)
delimiter	(string) Definiert das Trennzeichen, das zur Trennung der Multiselect-Werte verwendet wird. Wenn nicht angegeben, wird die globale section_delimiter-Einstellung verwendet.

Befüllen des Steuerelements mit Daten

In der Regel werden die Werte für die Multiselect-Schaltflächen über den options-Parameter festgelegt:

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' }
    ]},
    ...
];

Jedes Element im options-Array muss diese beiden erforderlichen Eigenschaften enthalten:

• key – Die eindeutige ID der Option
• label – Die für die Option angezeigte Textbezeichnung

Checkboxen mit Serverdaten befüllen

Um die Werte der Checkboxen vom Server zu laden, verwenden Sie die Methode serverList:

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");

Hier ist api/data ein serverseitiges Skript, das sowohl die Events als auch die Optionen für die Multiselect-Schaltflächen zurückgibt, formatiert wie in Beispiele für 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"}    
      ]                                     
   }                                        
}

var 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 Laden

Im statischen Modus werden alle Event-Parameteroptionen als separate Felder in der Datenbank gespeichert, was eine flexiblere Logik ermöglicht, aber zusätzliche Abfragen erfordert, um alle Optionen zu laden.

Im dynamischen Modus werden die Optionen nur bei Bedarf geladen. Dies reduziert die Anzahl der Abfragen, schränkt jedoch die Möglichkeit ein, benutzerdefinierte Logik zu implementieren.

Auf der Serverseite sollte Ihr Code ähnlich wie folgt aussehen.

Um den dynamischen Modus zu aktivieren, fügen Sie die Eigenschaft script_url zusammen mit options hinzu:

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

Der api/options-Endpunkt sollte JSON-Daten wie folgt zurückgeben:

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

Nach oben