EasyUI 表单 tree

第一步：创建HTML标记

<divid="dlg"style="padding:20px;">

    <h2>Account Information</h2>

    <formid="ff"action="/demo6/ProcessServlet"method="post">

        <table>

            <tr>

                <td>Name:</td>

                <td><inputtype="text"name="name"/></td>

            </tr>

            <tr>

                <td>Address:</td>

                <td><inputtype="text"name="address"/></td>

            </tr>

            <tr>

                <td>City:</td>

                <td><selectclass="easyui-combotree"url="city_data.json"name="city"style="width:155px;"/></td>

            </tr>

        </table>

    </form>

</div>

我们设置复合tree的url属性，这个字段可以被从服务器端检索tree。注意，字段的class名应该是easyui-combotree，所以我们不需要些任何js代码，复合tree字段就会自动生成。
第二步，创建对话框
我们在对话框中放置表单，这个对话框有发送和取消两个按钮。

$('#dlg').dialog({

    title:'Register',

    width:310,

    height:250,

    buttons:[{

        text:'Submit',

        iconCls:'icon-ok',

        handler:function(){

            $('#ff').form('submit',{

                success:function(data){

                    $.messager.alert('Info',data,'info');

                }

            });

        }

    },{

        text:'Cancel',

        iconCls:'icon-cancel',

        handler:function(){

            $('#dlg').dialog('close');

        }

    }]

});

第三部，写服务程序
服务代码接受表单数据并返回：

publicclassProcessServlet extendsHttpServlet {

    protectedvoiddoPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {

        String name = request.getParameter("name");

        String address = request.getParameter("address");

        String city = request.getParameter("city");

        System.out.println(name);

        System.out.println(address);

        System.out.println(city);

        PrintWriter out = response.getWriter();

        out.print("Name:"+name+",Address:"+address+",City ID:"+city);

        out.flush();

        out.close();

    }

}

现在我们点击发送按钮，得到一个信息框，显示一些数据。

复合tree是非常简单的。我们做设置url属性以检索tree数据。