jQuery EasyUI Formularios -Crear cuadro desplegable de árbol

El cuadro desplegable de árbol (ComboTree) es un cuadro combinado (ComboBox) con una estructura de árbol (Tree) desplegable. Puede usarse como un campo de formulario y puede enviarse a un servidor remoto.

En este tutorial, crearemos un formulario de registro con los campos name, address y city. El campo city es un campo de cuadro desplegable de árbol (ComboTree), donde el usuario puede desplegar el panel de árbol (tree panel) y seleccionar una ciudad específica.

Crear formulario (Form)

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

En el código anterior se puede ver que hemos establecido un atributo url para un campo de cuadro desplegable de árbol (ComboTree) llamado 'city', que puede recuperar datos de estructura de árbol (Tree) desde un servidor remoto. Tenga en cuenta que este campo tiene un nombre de clase llamado 'easyui-combotree', por lo que no necesitamos escribir ningún código JavaScript; el campo de cuadro desplegable de árbol (ComboTree) se renderizará automáticamente.

Descargar ejemplos de jQuery EasyUI

jeasyui-form-form2.zip