logo

EasyUI 表单 tree2012-07-18

复合tree是一种复选框和下拉tree。它能像表单字段一样传递到服务端。在这个教程中,我们建立注册表单,这个表单有name,address,city字段。city字段是一个复合tree字段,用户可以下拉tree面板并选择指定city。
第一步:创建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数据。

相关话题

热门搜索

  • EasyUI
  • 表单
  • tree

扫描二维码分享话题