Radio

Eine Gruppe von Optionsfeldern (Radio Buttons)

Stellen Sie sicher, dass die editors-Erweiterung aktiviert ist, um dieses Steuerelement im Lightbox zu verwenden.

scheduler.plugins({
    editors: true });
 
var priorities = [
    { key: 1, label: 'High' },
    { key: 2, label: 'Medium' },
    { key: 3, label: 'Low' }
];
 
scheduler.locale.labels.section_priority = 'Priority';
 
scheduler.config.lightbox.sections = [
    { name:"text", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"priority", height:58, options:priorities, 
                map_to:"priority", type:"radio", vertical:true},
    { name:"time", height:72, type:"time", map_to:"auto"}
];

Initialisierung

Um das Radio-Steuerelement in das Lightbox einzubinden, gehen Sie wie folgt vor:

Aktivieren Sie die 'editors'-Erweiterung auf Ihrer Seite:

scheduler.plugins({
    editors: true
});

Fügen Sie die Radio-Sektion zur Lightbox-Konfiguration hinzu:

scheduler.config.lightbox.sections = [
    { name:"description", ... },
    { name:"radiobutton", height:58, options:priorities, 
    map_to:"priority", type:"radio", vertical:true},
    { name:"time", ...}
];

Definieren Sie das Label für die Sektion:

scheduler.locale.labels.section_priority = 'Priority';

Eigenschaften

Hier sind die wichtigsten Eigenschaften, die üblicherweise für das 'radio'-Steuerelement gesetzt 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 Daten-Property-Name, auf den diese Sektion abbildet
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) der Steuerelement-Typ der Sektion
options	(Array von Objekten) definiert die Auswahloptionen für das Steuerelement (wird für 'select', 'multiselect', 'radio', 'combo' Steuerelemente verwendet). Jedes Objekt stellt eine Option dar und beinhaltet: key - (string) die ID der Option, wird mit dem Daten-Property des Events abgeglichen label - (string) die angezeigte Bezeichnung der Option
vertical	(boolean) bestimmt, ob die Optionsfelder vertikal (true) oder horizontal angeordnet sind (gilt für 'multiselect' und 'radio' Steuerelemente)

Befüllen des Steuerelements mit Daten

Typischerweise werden die Werte für die Optionsfelder über den options-Parameter gesetzt:

scheduler.config.lightbox.sections = 
    {   name:"alert", type:"select", 
        ...
        options:[
            { key: 1, label: 'High' },
            { key: 2, label: 'Medium' },
            { key: 3, label: 'Low' }
    ]},
    ...
];

Jedes Element im options-Array muss zwei erforderliche Eigenschaften enthalten:

key – die ID der Option
label – der angezeigte Text der Option

Abrufen der Optionsfeld-Werte vom Server

Um Optionsfelder mit Daten vom Server zu befüllen, verwenden Sie die serverList-Methode:

scheduler.config.lightbox.sections = [
    {name:"description", ...},
    {name:"priority", map_to:"priority", type:"radio", 
          options:scheduler.serverList("priority")},
    {name:"time", ...}
];
 
scheduler.load("./data/types.php");

Die Serverantwort für die load-Methode sollte eine Sammlung enthalten, die dem Namen der Serverliste entspricht und im JSON-Format wie im diesem Beispiel dargestellt ist:

{ 
   "data":[
      {
          "id":"1",
          "start_date":"2019-03-02 15:00:00",
          "end_date":"2019-03-04 16:00:00",
          "text":"Interview",
          "priority":1
      },
      {
          "id":"2",
          "start_date":"2019-03-02 17:00:00",
          "end_date":"2019-03-04 18:00:00",
          "text":"Performance review",
          "type":2
      }
   ], 
   "collections": {      "type":[               {"value":1,"label":"Low"},         {"value":2,"label":"Medium"},         {"value":3,"label":"High"}      ]   }}

Wenn Sie die PHP Connector-Bibliothek verwenden, könnte der serverseitige Code wie folgt aussehen:

//types.php
<?php
    require_once('../../../../connector-php/codebase/scheduler_connector.php');
    include ('../../common/config.php');
 
    $list = new JSONOptionsConnector($res, $dbtype);
    $list->render_table("types","typeid","typeid(value),name(label)");
 
    $scheduler = new JSONSchedulerConnector($res, $dbtype);
    $scheduler->set_options("type", $list);
    $scheduler->render_table(
        "tevents",
        "event_id",
        "start_date,end_date,event_name,type"
    );
?>

Beachten Sie, dass die updateCollection-Methode verwendet werden kann, um die Liste der abgerufenen Optionen zu aktualisieren.

Ereignisbehandlung für das Radio-Steuerelement

Die dhtmlxScheduler API stellt keine eingebauten Ereignis-Handler speziell für Optionsfelder im Scheduler-Lightbox bereit.

Sie können jedoch einen Klick-Handler für die Lightbox-Optionsfelder wie folgt hinzufügen:

1. Greifen Sie auf die Radio-Elemente zu, sobald das Lightbox geöffnet wird.

 
scheduler.attachEvent("onLightbox", function(){
    var node = scheduler.formSection("type").node;
    var radios = node.getElementsByTagName("input");
    ...
});

2. Fügen Sie das onclick-Ereignis zu jedem Optionsfeld im Lightbox hinzu.

 
scheduler.attachEvent("onLightbox", function(){
    ...
    for(var i = 0; i < radios.length; i++){
      radios[i].onclick = onRadioClick; 
    }
});

3. Definieren Sie die Funktion, die beim Klicken auf ein Optionsfeld ausgeführt wird.

function onRadioClick(event){
    var e = event || window.event,
        node = this;
 
    dhtmlx.message(node.value);
}

Nach oben