jQuery EasyUI Formular-Plugins -Combobox

jQuery EasyUI 插件jQuery EasyUI Plugins

Erbt von $.fn.combo.defaults. Überschreibt die Standardwerte über $.fn.combobox.defaults.

Die Combobox zeigt ein editierbares Textfeld und eine Dropdown-Liste an, aus der der Benutzer einen oder mehrere Werte auswählen kann. Benutzer können direkt Text oben in der Liste eingeben oder einen oder mehrere vorhandene Werte aus der Liste auswählen.

Abhängigkeiten

  • combo

Nutzung

Erstellen Sie eine Combobox aus einem <select>-Element mit einer vordefinierten Struktur.

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>

Erstellen Sie eine Combobox aus einem <input>-Tag.

<input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:'id',textField:'text',url:'get_data.php'">

Erstellen Sie eine Combobox mit JavaScript.

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

Erstellen Sie zwei voneinander abhängige Comboboxen.

<input id="cc1" class="easyui-combobox" data-options="
    valueField: 'id',
    textField: 'text',
    url: 'get_data1.php',
    onSelect: function(rec){
    var url = 'get_data2.php?id='+rec.id;
    $('#cc2').combobox('reload', url);
    }">
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">

Beispiel für ein JSON-Datenformat:

[{
    "id":1,
    "text":"text1"
},{
    "id":2,
    "text":"text2"
},{
    "id":3,
    "text":"text3",
    "selected":true
},{
    "id":4,
    "text":"text4"
},{
    "id":5,
    "text":"text5"
}]

Eigenschaften

Diese Eigenschaften erben von combo. Die folgenden Eigenschaften wurden für die Combobox hinzugefügt.

Name Type Beschreibung Standard
valueField string Der Name des zugrunde liegenden Datenfelds, das an den Wert der ComboBox gebunden ist. value
textField string Der Name des zugrunde liegenden Datenfelds, das an den Text der ComboBox gebunden ist. text
groupField string Gibt das Feld an, nach dem gruppiert werden soll. Diese Eigenschaft ist seit Version 1.3.4 verfügbar. null
groupFormatter function(group) Gibt den Gruppentext zurück, der bei den gruppierten Elementen angezeigt werden soll. Diese Eigenschaft ist seit Version 1.3.4 verfügbar.
Codebeispiel:
$('#cc').combobox({
    groupFormatter: function(group){
        return '<span style="color:red">' + group + '</span>';
    }
});
mode string Definiert, wie Listendaten geladen werden, wenn sich der Text ändert. Auf 'remote' setzen, wenn die Combobox vom Server lädt. Im Modus 'remote' wird der vom Benutzer eingegebene Wert als HTTP-Anfrageparameter mit dem Namen 'q' an den Server gesendet, um neue Daten abzurufen. local
url string Die URL zum Laden der Listendaten vom Remote-Server. null
method string Die HTTP-Methode, die zum Abrufen von Daten verwendet wird. post
data array Die geladenen Listendaten.
Codebeispiel:
<input class="easyui-combobox" data-options="
        valueField: 'label',
        textField: 'value',
        data: [{
            label: 'java',
            value: 'Java'
        },{
            label: 'perl',
            value: 'Perl'
        },{
            label: 'ruby',
            value: 'Ruby'
        }]" />
null
filter Funktion Definiert, wie lokale Daten gefiltert werden, wenn 'mode' auf 'local' gesetzt ist. Die Funktion hat zwei Parameter:
q: Der vom Benutzer eingegebene Text.
row: Die Zeilendaten in der Liste.
Geben Sie true zurück, damit die Zeile angezeigt werden darf.

Codebeispiel:
$('#cc').combobox({
    filter: function(q, row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});
formatter Funktion Definiert, wie eine Zeile gerendert wird. Die Funktion hat einen Parameter: row.
Codebeispiel:
$('#cc').combobox({
    formatter: function(row){
        var opts = $(this).combobox('options');
        return row[opts.textField];
    }
});
loader function(param,success,error) Definiert, wie Daten vom Remote-Server geladen werden. Geben Sie false zurück, um die Aktion abzubrechen. Die Funktion hat die folgenden Parameter:
param: Das Parameterobjekt, das an den Remote-Server gesendet werden soll.
success(data): Die Callback-Funktion, die aufgerufen wird, wenn die Daten erfolgreich abgerufen wurden.
error(): Die Callback-Funktion, die aufgerufen wird, wenn das Abrufen der Daten fehlschlägt.
 JSON-Loader
loadFilter function(data) Gibt die gefilterten Daten zurück, die angezeigt werden sollen. Diese Eigenschaft ist seit Version 1.3.3 verfügbar.

Ereignisse

Diese Ereignisse erben von combo. Die folgenden Ereignisse wurden für die combobox hinzugefügt.

Name Parameters Beschreibung
onBeforeLoad param Wird ausgelöst, bevor die Anforderung zum Laden von Daten erfolgt. Geben Sie false zurück, um den Ladevorgang abzubrechen.
Codebeispiel:
// change the http request parameters before load data from server
$('#cc').combobox({
    onBeforeLoad: function(param){
        param.id = 2;
        param.language = 'js';
    }
});
onLoadSuccess none Wird ausgelöst, wenn die Remote-Daten erfolgreich geladen wurden.
onLoadError none Wird ausgelöst, wenn das Laden der Remote-Daten fehlschlägt.
onSelect record Wird ausgelöst, wenn der Benutzer ein Listenelement auswählt.
onUnselect record Wird ausgelöst, wenn der Benutzer ein Listenelement abwählt.

Methoden

Diese Methoden erben von combo. Die folgenden Methoden wurden für die Combobox hinzugefügt oder überschrieben.

Name Parameters Beschreibung
options none Gibt das Optionsobjekt zurück.
getData none Gibt die geladenen Daten zurück.
loadData data Lädt lokale Listendaten.
reload url Fordert Remote-Listendaten an. Übergeben Sie den Parameter 'url', um den ursprünglichen URL-Wert zu überschreiben.
Codebeispiel:
$('#cc').combobox('reload');  // reload list data using old URL
$('#cc').combobox('reload','get_data.php');  // reload list data using new URL
setValues values Legt das Array der Werte für die Combobox fest.
Codebeispiel:
$('#cc').combobox('setValues', ['001','002']);
setValue value Legt den Wert der Combobox fest.
Codebeispiel:
$('#cc').combobox('setValue', '001');
clear none Löscht den Wert der Combobox.
select value Wählt die angegebene Option aus.
unselect value Hebt die Auswahl der angegebenen Option auf.
jQuery EasyUI 插件jQuery EasyUI Plugins Weitere Erweiterungen