Combo

In diesem Abschnitt wird das Kombinationsfeld (Combo-Box) der DHTMLX Combo Komponente behandelt.

var holders = [
    { key: 1, label: 'James' },
    { key: 2, label: 'Alex' },
    { key: 3, label: 'Antony' },
    { key: 4, label: 'Andrew' }
];
 
scheduler.locale.labels.section_holder = "Holder";
 
scheduler.config.lightbox.sections = [
    { name:"description", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"holders", options:holders, map_to:"holders", type:"combo", 
    image_path:"../common/dhtmlxCombo/imgs/", height:30, filtering:true},
    { name:"time", height:72, type:"time", map_to:"auto"}
];

Related sample:  Combo box in the lightbox

Initialisierung

Um das Combo-Steuerelement in der Lightbox zu verwenden, gehen Sie wie folgt vor:

1. Binden Sie die Dateien von dhtmlxCombo ein:

   <script src="../codebase/dhtmlxscheduler.js" ...></script>
   <link rel="stylesheet" href="../codebase/dhtmlxscheduler.css" ...>
    
   <link rel="stylesheet" href="common/dhtmlxCombo/dhtmlxcombo.css" ..>
   <script src="common/dhtmlxCombo/dhtmlxcombo.js" ...></script>

2. Aktivieren Sie die editors-Erweiterung auf der Seite:

   scheduler.plugins({
       editors: true
   });

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

   scheduler.config.lightbox.sections = [
       { name:"description", ... },
       { name:"holders", options:holders, map_to:"holders", type:"combo", 
       image_path:"../common/dhtmlxCombo/imgs/", height:30, filtering:true},
       { name:"time", ...}
   ];

4. Legen Sie das Label für die Sektion fest:

   scheduler.locale.labels.section_holders = "Holder";

Related sample:  Combo box in the lightbox

Eigenschaften

Hier sind einige wichtige und häufig genutzte Eigenschaften für das 'combo'-Steuerelement (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 der Sektion zugeordnet wird
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) Der Typ des Steuerelements der Sektion
options	(Array von Objekten) Definiert die Auswahloptionen des Steuerelements (für 'select', 'multiselect', 'radio', 'combo' Steuerelemente). Jedes Objekt im Array spezifiziert eine einzelne Option und besitzt folgende Eigenschaften: key - (string) Die ID der Option. Dieses Attribut wird mit der Daten-Eigenschaft des Events verglichen, um Optionen zuzuweisen label - (string) Die Bezeichnung der Option
image_path	(string) Der Pfad zu den dhtmlxCombo-Bildern
filtering	(boolean, string) Aktiviert die Auto-Filter-Unterstützung (Optionen werden beim Tippen gefiltert). Optional Der Parameter kann folgende Werte annehmen: false - Deaktiviert das Filtern true oder "start" - Aktiviert das Filtern, Suche ab Beginn des Eintrags "between" - Aktiviert das Filtern, sucht jede Vorkommen des eingegebenen Textes in den Einträgen
script_path	(string) Der Pfad zum serverseitigen Skript, das die Combo-Optionen bereitstellt. Optional
cache	(boolean) Aktiviert oder deaktiviert das Caching der Skript-Antworten (Aktivierung empfohlen). Optional

Befüllen des Steuerelements mit Daten

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

scheduler.config.lightbox.sections = 
    { 
        name:"holders", type:"combo", 
        ...
        options:[
            { key: 1, label: 'James' },
            { key: 2, label: 'Alex' },
            { key: 3, label: 'Antony' },
            { key: 4, label: 'Andrew' }
    ]},
    ...
];

Jeder Eintrag im options Parameter muss zwei erforderliche Eigenschaften besitzen:

• key - Die ID der Option
• label - Die Bezeichnung der Option

Befüllen des Steuerelements mit Daten vom Server

Um Combo-Optionen vom Server zu laden, verwenden Sie die script_path Eigenschaft, um die URL des serverseitigen Skripts anzugeben, das die Anfragen verarbeitet.

scheduler.config.lightbox.sections = [
    { name: "country", type: "combo", script_path: "data/combo_select", ... },
        ...
];

Die script_path Eigenschaft definiert die URL, von der die Combo ihre Optionen per AJAX lädt.

Da der Combo-Selektor auf dhtmlxCombo basiert, sollte der Server die Daten in einem kompatiblen Format zurückgeben. Details zum Hinzufügen von Daten zur Combo finden Sie im Artikel Loading Options.

Anfragen werden in zwei Szenarien gestellt:

1) Wenn die Lightbox geöffnet wird und die Combo einen ausgewählten Wert besitzt, sendet das Steuerelement eine Anfrage, um das Label für diese Option zu laden.

Die Anfrage enthält einen id Query-Parameter:

GET /url?id=1

Die Antwort sollte ein Array enthalten, das nur das Element mit der angegebenen ID enthält, formatiert wie folgt:

[
   { "value": 1, "text": "Marketing"}
]

2) Wenn ein Benutzer beginnt, im Combo-Eingabefeld zu tippen, lädt das Steuerelement gefilterte Optionen.

Die Anfrage enthält den eingegebenen Text als mask Query-Parameter:

GET /url?mask=al

Der Server sollte alle Elemente zurückgeben, die mit dem Filter übereinstimmen:

[
   { "value": 1, "text": "Albania"},
   { "value": 3, "text": "Algeria"},
]

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

<?php
    require_once('../../connector-php/codebase/combo_connector.php');
    require_once("../common/config.php");
 
    $combo = new ComboConnector($res, $dbtype);
 
    $combo->event->attach("beforeFilter", "by_id");
    function by_id($filter) {
        if (isset($_GET['id']))
            $filter->add("item_id", $_GET['id'], '=');
    }   
 
    $combo->dynamic_loading(3);
    $combo->render_table("Countries","item_id","item_nm");
 
?>

Related sample:  Populating a combo box from the server

Auto-Filtering Modus

Der Auto-Filtering Modus bedeutet, dass die Optionen automatisch beim Tippen gefiltert werden. Um diesen Modus zu aktivieren, setzen Sie die filtering Eigenschaft auf true:

scheduler.config.lightbox.sections = [
    { name:"holders", type:"combo", filtering:true, ... },
    ...
];

Weitere Details finden Sie in der dhtmlxCombo Dokumentation unter Filtering.

Nach oben