jQuery EasyUI Form -Создание ComboTree

ComboTree — это поле со списком с выпадающей древовидной структурой. Его можно использовать как поле формы и отправлять на удалённый сервер.

В этом руководстве мы создадим регистрационную форму с полями имени, адреса и города. Поле города — это поле ComboTree, в котором пользователи могут раскрыть панель дерева и выбрать конкретный город.

Создание формы

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

Из приведённого выше кода мы задаём атрибут url для поля ComboTree с именем 'city'. Это поле может получать данные древовидной структуры с удалённого сервера. Обратите внимание, что это поле имеет класс стиля с именем 'easyui-combotree', поэтому нам не нужно писать какой-либо код JavaScript; поле ComboTree будет отрисовано автоматически.

Скачать примеры jQuery EasyUI

jeasyui-form-form2.zip