Easyui表单,文本框,下拉菜单三级联动练习代码

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4 <html>
  5 <head>
  6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7 <title>测试表单</title>
  8 <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.min.js"></script>
  9 <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/icon.css">
 10 <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/default/easyui.css">
 11 <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
 12 <script type="text/javascript" src="js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
 13 
 14     
 15     
 16 </head>
 17 <body>
 18 <script type="text/javascript">
 19     
 20     $(function(){
 21         
 22         $("#fm").panel({
 23             300,
 24             height:400,
 25             title:'登录框'
 26         });
 27         
 28         $("#bt").linkbutton({
 29             100
 30         });
 31         $('#bt').click(function(){
 32             $("#myform").form('submit');
 33             return false;
 34             });
 35         
 36         $("#myform").form({
 37             url:'TestSubmit',
 38             onSubmit:function(){
 39                 //alert('表单测试');
 40                 var isValid = $(this).form('validate');
 41                 if(!isValid)
 42                 {
 43                 $.messager.show({title:'信息',msg:'输入有误'});
 44                 return false
 45                 }
 46             },
 47             novalidate:false,
 48             success:function(data){
 49                 
 50                 var data = eval('('+ data + ')');
 51                 if(data.success == true)
 52                     {
 53                         $.messager.show({title:'信息', msg:data.message});
 54                     }
 55                 alert(data.message);
 56             }
 57         });
 58         
 59     });
 60     
 61     </script>
 62 <div id="fm">
 63     <form id="myform">
 64         <table>
 65         
 66             <tr>
 67                 <td>用户名称:</td>
 68                 <td><input  class="easyui-textbox"
 69                  data-options="required:true,validType:'length[2,5]'"></td>
 70             </tr>
 71             <tr>
 72                 <td>用户邮箱:</td>
 73                 <td><input  class="easyui-textbox"
 74                  data-options="required:true,validType:'email',missingMessage:'dddd'"></td>
 75             </tr>
 76             <tr>
 77                 <td>用户主页:</td>
 78                 <td><input  class="easyui-textbox"
 79                  data-options="required:false,validType:'url',invalidMessage:'xxxx',iconCls:'icon-search',prompt:'http://开头'"></td>
 80             </tr>
 81             <tr>
 82                 <td>密码:</td>
 83                 <td><input  class="easyui-textbox"
 84                  data-options="required:true,validType:'length[6,10]',type:'password'"></td>
 85             </tr>
 86             <tr>
 87                 <td>年龄:</td>
 88                 <td><input  class="easyui-numberbox"
 89                  data-options="required:true,max:90"></td>
 90             </tr>
 91             <tr>
 92                 <td>工资:</td>
 93                 <td><input  class="easyui-numberbox"
 94                  data-options="required:true,max:10000,prefix:'$',precision:2"></td>
 95             </tr>
 96             <tr>
 97                 <td>日期:</td>
 98                 <td><input  class="easyui-datebox"
 99                  data-options="required:true,editable:false"></td>
100             </tr>
101             <tr>
102                 <td>时间:</td>
103                 <td><input  class="easyui-datetimebox"
104                  data-options="required:true,editable:false"></td>
105             </tr>
106             <tr>
107                 <td>城市:</td>
108                 <td><select class="easyui-combobox" style="100px;"
109                 >
110                      <option>1</option>
111                      <option>2</option>
112                      <option>3</option>
113                      <option>4</option>
114                  
115                  
116                  </select></td>
117             </tr>
118             <tr>
119                 <td>城市1:</td>
120                 <td><input id="yiji" class="easyui-combobox" style="100px;"
121                 data-options="valueField:'id',
122                 textField:'name',
123                 url:'jsonMembers?pid=0',
124                 editable:false,
125                 value:-1,
126                 onSelect: function(rec){ 
127                         
128                     var url = 'jsonMembers?pid='+rec.id;
129                     $('#erji').combobox('setValue','-1'); 
130                     $('#erji').combobox('reload', url);
131                     $('#sanji').combobox('setValue','-1'); 
132                     $('#sanji').combobox('reload','jsonMembers');
133                 }" >
134                  </td>
135             </tr>
136             <tr>
137                 <td>城市2:</td>
138                 <td><input id="erji" class="easyui-combobox" style="100px;"
139                 data-options="valueField:'id',textField:'name',editable:false,
140                         value:'未选择',
141                 onSelect: function(rec){    
142             var url = 'jsonMembers?pid='+rec.id; 
143             $('#sanji').combobox('setValue','-1');   
144             $('#sanji').combobox('reload', url);    
145         }" >
146                  </td>
147             </tr>
148             <tr>
149                 <td>城市3:</td>
150                 <td><input id="sanji" class="easyui-combobox" style="100px;"
151                 data-options="valueField:'id',textField:'name',editable:false,value:'未选择'" >
152                  </td>
153             </tr>
154             <tr>
155                 <td colspan="2" align="center"><a href="#" id="bt">提交</a></td>
156             </tr>
157         </table>
158 
159     </form>
160 </div>
161 
162 </body>
163 </html>

Servlet

 1 package com.hanqi;
 2 
 3 import java.io.IOException;
 4 import java.util.ArrayList;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 import com.alibaba.fastjson.JSON;
13 
14 /**
15  * Servlet implementation class jsonMembers
16  */
17 @WebServlet("/jsonMembers")
18 public class jsonMembers extends HttpServlet {
19     private static final long serialVersionUID = 1L;
20        
21     /**
22      * @see HttpServlet#HttpServlet()
23      */
24     public jsonMembers() {
25         super();
26         // TODO Auto-generated constructor stub
27     }
28 
29     /**
30      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
31      */
32     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
33         // TODO Auto-generated method stub
34         //接收地区父id
35         String pid = request.getParameter("pid");
36         
37         //防止直接运行该页
38         if(pid == null || pid.trim().length() == 0)
39         {
40             pid = "-1";
41         }
42 
43             try {
44                 //声明Member的集合类
45                 ArrayList<Member> arr;
46                 
47                 //实例化数据库操作类
48                 AreaDao ad = new AreaDao();
49                 
50                 //调用查询方法,获得数据库记录
51                 arr = ad.selArea(Integer.parseInt(pid));
52                 
53                 //声明要向前台输出的字符串
54                 String str = "";
55                 
56                 //如果没有查到记录
57                 if(arr == null)
58                 {
59                     //实例化ArrayList
60                     arr = new ArrayList<Member>();
61                 }
62                 
63                 //实例化实体类
64                 Member m = new Member();
65                 
66                 //添加未选择时显示的内容
67                 m.setId(-1);
68                 m.setName("未选择");
69                 arr.add(0,m);
70                 
71                 //将ArrayList转换成json字符串    
72                 str = JSON.toJSON(arr).toString();
73                 //str = JSON.toJSONString(arr);
74                 
75                 //向前台输出json字符串
76                 response.getWriter().print(str);
77 
78                 }catch (Exception e) {
79                 
80                 response.getWriter().append(e.getMessage());
81             }
82 
83 
84         //response.getWriter().append("Served at: ").append(request.getContextPath());
85     }
86 
87     /**
88      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
89      */
90     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
91         // TODO Auto-generated method stub
92         doGet(request, response);
93     }
94 
95 }