Radio Button-Steuerelement

Dieses Steuerelement präsentiert eine Auswahl von Optionen, bei der jeweils nur eine ausgewählt werden kann.

Radio Button

Initialisierung

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

1) Fügen Sie einen Abschnitt in der Lightbox-Konfiguration hinzu:

var opts = [
    {key: 1, label: "High"},
    {key: 2, label: "Normal"},
    {key: 3, label: "Low"}                                      
];
 
gantt.config.lightbox.sections = [
    {name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
    {name: "priority", height: 22, map_to: "priority", type: "radio", options: [opts]},     {name: "time", type: "duration", map_to: "auto"}
];

2) Definieren Sie eine Beschriftung für diesen Abschnitt:

gantt.locale.labels.section_priority = "Priority";

Related sample: Radio control

Eigenschaften

Hier sind einige der wichtigsten Eigenschaften, die häufig mit dem Radio Button-Steuerelement verwendet werden (die vollständige Liste finden Sie hier):

name – (string) der Name des Abschnitts
map_to – (string) die Daten-Eigenschaft, der der Abschnitt entspricht
type – (string) der Typ des Abschnitts-Steuerelements
options – (array) ein Array von Objekten, das die auswählbaren Optionen definiert (wird mit select, checkbox und radio Steuerelementen verwendet). Jedes Objekt stellt eine Option dar und enthält:
- key – (string) der Bezeichner der Option, der mit den Aufgabendaten abgeglichen wird, um die Option zuzuweisen
- label – (string) der angezeigte Text für die Option
focus – (boolean) wenn auf true gesetzt, erhält der Abschnitt automatisch den Fokus, sobald die Lightbox geöffnet wird
default_value – (any) der Standardwert für das Steuerelement, der nur angewendet wird, wenn der Eingabewert nicht definiert ist

Befüllen des Steuerelements mit Daten

Um die Optionen für das Radio Button-Steuerelement festzulegen, verwenden Sie den options-Parameter:

gantt.config.lightbox.sections = [      
    {name: "priority", map_to: "priority", type: "radio", options: [
        {key: 1, label: "High"},
        {key: 2, label: "Normal"},
        {key: 3, label: "Low"},
    ]}      
];

Jedes Element im options-Array benötigt zwei Eigenschaften:

key – der Bezeichner der Option
label – der angezeigte Text für die Option

Zurück nach oben