jQuery EasyUI Form -Créer un ComboTree

ComboTree est une boîte combo avec une structure d'arbre déroulante. Il peut être utilisé comme champ de formulaire et soumis à un serveur distant.

Dans ce tutoriel, nous allons créer un formulaire d'inscription avec les champs nom, adresse et ville. Le champ ville est un champ ComboTree, dans lequel les utilisateurs peuvent dérouler un panneau d'arbre et sélectionner une ville spécifique.

Créer un formulaire

    <div id="dlg" class="easyui-dialog" style="width:500px;height:250px;padding:10px 30px;"
            title="Register" buttons="#dlg-buttons">
        <h2>Account Information</h2>
        <form id="ff" method="post">
            <table>
                <tr>
                    <td>Name:</td>
                    <td><input type="text" name="name" style="width:350px;"/></td>
                </tr>
                <tr>
                    <td>Address:</td>
                    <td><input type="text" name="address" style="width:350px;"/></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><select class="easyui-combotree" url="data/city_data.json" name="city" style="width:156px;"/></td>
                </tr>
            </table>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-ok" onclick="savereg()">Submit</a>
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>

À partir du code ci-dessus, nous définissons un attribut url pour un champ ComboTree nommé 'city'. Ce champ peut récupérer des données de structure d'arbre depuis un serveur distant. Notez que ce champ a une classe de style nommée 'easyui-combotree', nous n'avons donc pas besoin d'écrire de code JavaScript ; le champ ComboTree sera rendu automatiquement.

Télécharger les exemples jQuery EasyUI

jeasyui-form-form2.zip