Plugins de formulaire jQuery EasyUI -Comb

jQuery EasyUI 插件Plugins jQuery EasyUI

Hérite de $.fn.combo.defaults. Surchargez les valeurs par défaut via $.fn.combobox.defaults.

La combobox affiche une zone de texte modifiable et une liste déroulante, dans laquelle l'utilisateur peut sélectionner une ou plusieurs valeurs. Les utilisateurs peuvent saisir directement du texte en haut de la liste, ou sélectionner une ou plusieurs valeurs existantes dans la liste.

Dépendances

  • combo

Utilisation

Créer une combobox à partir d'un élément <select> avec une structure prédéfinie.

<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>

Créer une combobox à partir d'une balise <input>.

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

Créer une combobox en JavaScript.

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

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

Créer deux comboboxes dépendantes.

<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'">

Exemple de format de données JSON :

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

Propriétés

Ces propriétés héritent de combo. Les suivantes sont les propriétés ajoutées pour la combobox.

Name Type Description Default
valueField string Le nom du champ de données sous-jacent lié à la valeur du ComboBox. value
textField string Le nom du champ de données sous-jacent lié au texte du ComboBox. text
groupField string Indique le champ par lequel regrouper. Cette propriété est disponible depuis la version 1.3.4. null
groupFormatter function(group) Renvoie le texte du groupe à afficher sur les éléments groupés. Cette propriété est disponible depuis la version 1.3.4.
Exemple de code :
$('#cc').combobox({
    groupFormatter: function(group){
        return '<span style="color:red">' + group + '</span>';
    }
});
mode string Définit comment charger les données de la liste lorsque le texte change. Définissez sur 'remote' si la liste déroulante charge depuis le serveur. Lorsque le mode 'remote' est défini, la valeur saisie par l'utilisateur sera envoyée au serveur en tant que paramètre de requête HTTP nommé 'q' pour récupérer de nouvelles données. local
url string L'URL pour charger les données de la liste depuis le serveur distant. null
method string La méthode HTTP utilisée pour récupérer les données. post
data array Les données de liste chargées.
Exemple de code :
<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 fonction Définit comment filtrer les données locales lorsque 'mode' est défini sur 'local'. La fonction a deux paramètres :
q : Le texte saisi par l'utilisateur.
row : Les données de ligne dans la liste.
Renvoie true pour autoriser l'affichage de la ligne.

Exemple de code :
$('#cc').combobox({
    filter: function(q, row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});
formatter fonction Définit comment afficher une ligne. La fonction a un paramètre : row.
Exemple de code :
$('#cc').combobox({
    formatter: function(row){
        var opts = $(this).combobox('options');
        return row[opts.textField];
    }
});
loader function(param,success,error) Définit comment charger les données depuis le serveur distant. Renvoie false pour annuler l'action. La fonction a les paramètres suivants :
param : L'objet de paramètres à envoyer au serveur distant.
success(data) : La fonction de rappel à appeler lorsque les données sont récupérées avec succès.
error() : La fonction de rappel à appeler en cas d'échec de la récupération des données.
 chargeur json
loadFilter function(data) Renvoie les données filtrées à afficher. Cette propriété est disponible depuis la version 1.3.3.

Événements

Ces événements héritent de combo. Voici les événements ajoutés pour la combobox.

Name Parameters Description
onBeforeLoad param Déclenché avant la requête de chargement des données. Retournez false pour annuler l'action de chargement.
Exemple de code :
// change the http request parameters before load data from server
$('#cc').combobox({
    onBeforeLoad: function(param){
        param.id = 2;
        param.language = 'js';
    }
});
onLoadSuccess none Déclenché lorsque les données distantes sont chargées avec succès.
onLoadError none Déclenché lorsque le chargement des données distantes échoue.
onSelect record Déclenché lorsque l'utilisateur sélectionne un élément de liste.
onUnselect record Déclenché lorsque l'utilisateur désélectionne un élément de liste.

Méthodes

Ces méthodes héritent de combo. Les méthodes suivantes sont ajoutées ou redéfinies pour la combobox.

Name Parameters Description
options none Renvoie l'objet options.
getData none Retourne les données chargées.
loadData data Charge les données de liste locales.
reload url Demande les données de liste distantes. Passez le paramètre 'url' pour remplacer la valeur d'URL d'origine.
Exemple de code :
$('#cc').combobox('reload');  // reload list data using old URL
$('#cc').combobox('reload','get_data.php');  // reload list data using new URL
setValues values Définit le tableau de valeurs pour la combobox
Exemple de code :
$('#cc').combobox('setValues', ['001','002']);
setValue value Définit la valeur de la combobox.
Exemple de code :
$('#cc').combobox('setValue', '001');
clear none Efface la valeur de la combobox.
select value Sélectionne l'option spécifiée.
unselect value Désélectionne l'option spécifiée.
jQuery EasyUI 插件Plugins jQuery EasyUI Autres extensions