Valuelist

Eine Wertliste ermöglicht das Filtern von Eigenschaften (Checkboxes)

Schlüssel	Beschreibung	Default	Beispiel
id	ID des Controls	zufällige ID
label	Bezeichnung	undefined
value	Wert	''
type	Typ der Auswahl	checkbox
max	Maximaler Wert	undefined
min	Kleinster Wert	undefined
maxlength	Maximale Länge	undefined
minlength	minimale Länge	undefined
pattern	Überprüfungsmuster	undefined
step	Schritte	undefined
disabled	Deaktiviert	undefined
required	Pflichtfeld	undefined
options	Optionen	undefined
control-group	Kontroll-Gruppe	undefined
spellcheck	Rechtschreibkontrolle	undefined
inputmode	Eingabemodus	undefined
autocomplete	Autovervollständigung	undefined
filter	Filter	ValueList.eventHandlerDefaultFilter
accept	Azemtanz von	undefined
aria-describedby	ARIA	undefined
placeholder	Platzhaltertext	undefined
class-help	CSS-Klasse der Hilfe	form-text text-muted
class-feedback	CSS-Klasse Feedback	undefined
class-group	CSS-Klasse der Gruppe	form-group position-relative'
class-label	CSS-Klasse des Labels	undefined
class-control-wrapper	CSS-Klasse des Wrpappers	undefined
class-option	CSS-Klasse der Optionen	form-check
class	CSS-Klasse	form-check-input
registry	Registry	undefined
registry-value	Registry für Werte	zufällige ID
formatter	Formatter	undefined
handler	Handler	undefined
handler-value	Handler für Werte	undefined
handler-before	Handler-Callback	undefined
handler-after	Handler-Callback	undefined
action	Aktion	undefined
attach	Attachment	undefined
readonly	Nur lesbar	undefined
feedback	Feedback	undefined
help	Hilfstext	undefined

In dem Beispiel wird eine einfache Wertliste mit den Optionen 'index1': 'Value1', 'index2': 'Value2', 'index3': 'Value3', 'index4': 'Value4' definiert.

form = new Alvine.Package.UI.Dialog.Form();

valueList = new Alvine.Package.UI.Dialog.ValueList(
    'my-valuelist-id', 'Meine Auswahl', {
        'handler': 'value',
        'attach': 'change',
        'registry': 'formdata | valuelist-regkey',
        "registry-value": 'formdata | valuelist-regkey',
        'help': 'Bitte wählen Sie aus',
        'options': {'index1': 'Value1', 'index2': 'Value2', 'index3': 'Value3', 'index4': 'Value4'}
    });

form.addControl(valueList);

Über die Methode ValueList.addControl(control) wird ein Filter hinzugefügt.

valueList.addControl(new Alvine.Package.UI.Dialog.Input(
    'my-filter-id', 'Filter', {
        'handler': 'value',
        'attach': 'change'
    }));

Es können beliebig viele Controls hinzugefügt werden.

Damit die Felder zur Filterung herangezogen werden können, muss eine Filterfunktion angegeben werden:

valueList = new Alvine.Package.UI.Dialog.ValueList(
    'my-valuelist-id', 'Meine Auswahl', {
        ...
        'filter': loadOptionsAndDoFilter,
        ...
    });

Die Filterfunktion kann wie in dem Beispiel gezeigt, auch Optionen nachladen:

function loadOptionsAndDoFilter(event) {
    var currentFilter, jqForm, currentFilterValue, form, self = this;

    currentFilter = jQuery('#my-filter-id');
    jqForm = currentFilter.closest('form');
    form = jqForm.get(0).Alvine.UIControl.plugin.control;
    currentFilterValue = currentFilter.val();

    Alvine.Package.Console.Host.fetch('https://myapi.example.com/posts?q='+currentFilterValue)
        .then(response => response.json())
        .then(json => {
            var map;

            map = self.get('options');
            map.preventNotification();

            /** Markierte (checked) Einträge nicht löschen */
            jQuery('#'+self.get('id')).find('input[type=checkbox]').not(':checked').each(function(i, obj) {
                map.remove(jQuery(obj).val());
            });

            for(var i = 0; i<10; i++) {

                if(json[i]['title'].toLowerCase().trim().indexOf(currentFilterValue)!==-1) {
                    map.set('index'+json[i]['id'], json[i]['title']);
                }
            }

            map.promoteNotification().notifyObserver();

        });

}

Objektreferenz

Valuelist(id, label, options)

Beschreibung

Erstellt ein neues Valuelist-Objekt

---

Parameter-Liste

id (String)

Die ID des Objektes

label

Text des Labels

options

Optionen (siehe Tabelle oben)

---

Rückgabewert

Neues Chart-Objekt

Valuelist.addControl(control)

Beschreibung

Neues Filter-Control hinzufügen

---

Parameter-Liste

control (Object)

Control hinzufügen

---

Rückgabewert

Valuelist-Objekt