第一步：创建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="155px;"/></td> </tr> </table> </form> </div>
我们设置复合tree的url属性，这个字段可以被从服务器端检索tree。注意，字段的class名应该是easyui-combotree，所以我们不需要些任何js代码，复合tree字段就会自动生成。
第二步，创建对话框
我们在对话框中放置表单，这个对话框有发送和取消两个按钮。
$('#dlg').dialog({
title:'Register',
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数据。