Combo

Eine Combo-Box, bereitgestellt durch die DHTMLX Combo-Komponente.

const 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"}
];

Combo box in the lightbox

Initialisierung

Um die Combo-Steuerung zum Lightbox hinzuzufügen, befolgen Sie diese Schritte:

1. Integrieren Sie die dhtmlxCombo-Dateien:

<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. Setzen Sie das Label für die Sektion:

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

Combo box in the lightbox

Eigenschaften

Die folgenden Eigenschaften sind größtenteils wichtig und werden häufig für die 'combo'-Steuerung festgelegt (siehe die vollständige Liste hier):

name	(string) der Name des Abschnitts
height	(number) die Höhe des Abschnitts
map_to	(string) der Name einer Daten-Eigenschaft, die dem Abschnitt zugeordnet wird
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) der Typ des Abschnitts-Steuerelements
options	(array von Objekten) definiert die Auswahloptionen des Steuerelements (für 'select', 'multiselect, 'radio', 'combo'-Steuerungen). Jedes Objekt im Array spezifiziert eine einzelne Option und nimmt folgende Eigenschaften auf: key - (string) die Option-ID. Dieses Attribut wird mit der Daten-Eigenschaft des Events verglichen, um Optionen Events zuzuordnen 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 einen der folgenden Werte annehmen: false - Filterung deaktivieren true oder "start" - Filterung aktivieren, Suche beginnt am Anfang des Elements "between" - Filterung aktivieren, Suche nach jeder Vorkommen des eingegebenen Texts in den Elementen
script_path	(string) der Pfad zum serverseitigen Skript, das die Optionen des Combos vom Server lädt. Optional
cache	(boolean) aktiviert/deaktiviert das Caching der Skriptantworten (empfohlen, die Eigenschaft zu aktivieren). Optional

Befüllung der Steuerung mit Daten

Im Allgemeinen sollten Sie, um Werte für die Combo-Steuerung festzulegen, den Parameter options verwenden:

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

Elemente im Parameter options müssen zwei Pflicht-Eigenschaften haben:

• key - (string) die Option-ID
• label - (string) die Bezeichnung der Option

Befüllung der Steuerung mit Daten vom Server

Um die Combo-Steuerung vom Server zu befüllen, verwenden Sie die Eigenschaft script_path, wobei der Pfad zum serverseitigen Skript angegeben wird, das Anfragen vom Server bearbeitet.

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

Die Eigenschaft script_path gibt eine URL an, von der das Combo seine Optionen lädt, d. h. wenn script_path angegeben ist, versucht das Combo, Daten von dieser URL per AJAX zu laden.

Der Combo-Auswahl-Selector basiert auf dhtmlxCombo, daher sollte der Server Daten zurückliefern, die damit kompatibel sind. Sie können in dem Artikel Loading Options nachlesen, wie Daten in das Combo eingefügt werden.

Die URL wird in zwei Fällen angefragt:

1. Wenn das Lightbox-Fenster geöffnet wird und das Combo einen ausgewählten Wert hat – das Steuerelement sendet eine Anfrage an den Server und lädt eine Bezeichnung für die ausgewählte Option.

Die Anfrage enthält einen Query-Parameter id:

GET /url?id="1"

Die Antwort sollte ein Array mit nur dem Element mit der angegebenen id im folgenden Format zurückgeben:

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

2. Wenn der Benutzer Text in das Eingabefeld eingibt – das Steuerelement lädt gefilterte Werte. Die Client-Anwendung sendet eine Anfrage mit dem eingegebenen Text im Parameter mask der Abfrage:

GET /url?mask="al"

Die Server-Antwort sollte alle Elemente zurückgeben, die dem Maskenwert entsprechen:

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

Beispiel eines Backend-Handlers (Node.js/Express):

app.get("/api/countries", async (req, res) => {
  const { id, mask } = req.query;
  // Abfrage Ihrer Datenquelle nach id oder mask
  const items = await countriesService.find({ id, mask });
  res.json(items); // [{ value: 1, text: "Albania" }, ...]
});

Populating a combo box from the server

Auto-Filtering-Modus

Der Auto-Filtering-Modus ist der Modus, in dem Optionen automatisch gefiltert werden, während der Benutzer tippt. Um den Modus zu aktivieren, setzen Sie die Eigenschaft filtering auf true:

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

Hinweis

Hinweis: Sie können den Auto-Filtering-Modus verwenden, unabhängig von der Quelle, von der Sie Daten laden (Client- oder Server-Seite).

Weitere Informationen finden Sie in der Dokumentation zu dhtmlxCombo unter dhtmlxCombo. Filtering.