1、表单的基本组件
2、WebContent/jsp/form_001.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String root = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单--表单基本控件</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" />
<!-- 引入easyui依赖库 -->
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
/*
1. validatebox验证框组件
A、required：定义是否字段应被输入。
B、missingMessage：当文本框是空时出现的提示文字。
C、invalidMessage：当文本框的内容无效时出现的提示文字。
D、validType：定义字段的验证类型，与自定义验证规则配合使用。
*/
//自定义验证规则
$.extend($.fn.validatebox.defaults.rules, {
midLength: {
validator: function(value, param){
return value.length >= param[0] && value.length <= param[1];
},
message: ''
},
equalLength: {
validator: function(value, param){
return value.length == param[0];
},
message: '密码必须为{0}个字符'
}
});
/*
2. numberbox数字框组件
A、min：允许的最小值，若小于最小值，则值自动设置为最小值。
B、max：允许的最大值，若大于最大值，则值自动设置为最大值。
C、该组件继承了validatebox验证框组件，故可以使用其的属性。
D、precision：显示在小数点后面的最大精度。
*/
$('#age').numberbox({
min:0,
max:150,
required:true,
missingMessage:'年龄必填',
precision:0
});
/*
3. datebox日期框组件
A、该组件继承了combo组件，可以使用其的editable属性
B、editable：定义是否用户可以往文本域中直接输入文字
C、combo组件继承了validatebox验证框组件，故可以使用其的required和missingMessage属性
*/
$('#birthday').datebox({
required:true,
missingMessage:'生日必填',
editable:false
});
/*
4. combobox下拉框组件
A、url：从远程加载列表数据的url。
B、valueField：绑定到 ComboBox的 value上的基础数据的名称，与json的key一致。
C、textField：绑定到combobox的text上的基础数据的名称，与json的value一致。
D、panelHeight：值为auto表示下拉框的高度自适应。
*/
$('#city').combobox({
url:'<%=root%>/UserServlet?method=getCity',
valueField:'id',
textField:'name',
required:true,
missingMessage:'所属城市必填',
editable:false,
panelHeight:'auto'
});
//numberbox数字框组件
$('#salary').numberbox({
min:1000,
max:20000,
required:true,
missingMessage:'薪水必填',
precision:2
});
/*
5. datetimebox日期时间框组件
*/
$('#starttime,#endtime').datetimebox({
required:true,
missingMessage:'时间必填',
editable:false
});
});
</script>
</head>
<body>
<div id="mydiv" class="easyui-panel" title="新增用户" iconCls="icon-add"
style="width:400px; height:350px;">
<form action="" method="post">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" class="easyui-validatebox" required="true" missingMessage="用户名必填" validType="midLength[2,5]" invalidMessage="用户名必须在2到5个字符之间"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" class="easyui-validatebox" required="true" missingMessage="密码必填" validType="equalLength[4]" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
男<input type="radio" name="sex" checked="checked" value="1">
女<input type="radio" name="sex" value="2">
</td>
</tr>
<tr>
<td>年龄:</td>
<td><input id="age" type="text" name="age"></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input id="birthday" type="text" name="birthday" style="width:146px;"/></td>
</tr>
<tr>
<td>所属城市:</td>
<td><input id="city" type="text" name="city" style="width:146px;"></td>
</tr>
<tr>
<td>薪水:</td>
<td><input id="salary" type="text" name="salary" /></td>
</tr>
<tr>
<td>开始时间:</td>
<td><input id="starttime" type="text" name="starttime" style="width:160px;"/></td>
</tr>
<tr>
<td>结束时间:</td>
<td><input id="endtime" type="text" name="endtime" style="width:160px;"/></td>
</tr>
<tr>
<td>个人描述:</td>
<td><input type="text" name="description" class="easyui-validatebox" required="true" missingMessage="个人描述必填" validType="midLength[5,50]" invalidMessage="个人描述必须在5到50个字符之间"/></td>
</tr>
<tr align="center">
<td colspan="2">
<a class="easyui-linkbutton">保存</a>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
3、com.easyui.bean.CityBean.java
package com.easyui.bean;
/**
* 城市基本信息
* @author LiPiaoShui
*/
public class CityBean {
private int id;
private String name;
public CityBean(int id, String name) {
this.id = id;
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
4、com.easyui.bean.TUserBean.java
package com.easyui.bean;
/**
* 用户基本信息
* @author LiPiaoShui
*/
public class TUserBean {
private int id;
private String username;
private String password;
private String sex;
private int age;
private String birthday;
private int city;
private String salary;
private String starttime;
private String endtime;
private String description;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getBirthday() {
return birthday;
}
public void setBirthday(String birthday) {
this.birthday = birthday;
}
public int getCity() {
return city;
}
public void setCity(int city) {
this.city = city;
}
public String getSalary() {
return salary;
}
public void setSalary(String salary) {
this.salary = salary;
}
public String getStarttime() {
return starttime;
}
public void setStarttime(String starttime) {
this.starttime = starttime;
}
public String getEndtime() {
return endtime;
}
public void setEndtime(String endtime) {
this.endtime = endtime;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}
5、com.easyui.servlet.UserServlet.java
package com.easyui.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.easyui.bean.CityBean;
import com.easyui.bean.TUserBean;
import com.easyui.dao.UserDao;
/**
* 用户控制器类
*
* @author LiPiaoShui
*/
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 9140830946116659042L;
private UserDao uDao = new UserDao();
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String method = request.getParameter("method");
if ("getList".equals(method)) {
getList(request, response);
} else if("getCityName".equals(method)) {
getCityName(request, response);
} else if("getCity".equals(method)) {
getCity(request, response);
}
}
/**
* 获取全部城市信息
* @param request
* @param response
*/
private void getCity(HttpServletRequest request,
HttpServletResponse response) {
try {
List<CityBean> cList = new ArrayList<CityBean>();
cList.add(new CityBean(1,"北京"));
cList.add(new CityBean(2,"上海"));
cList.add(new CityBean(3,"深圳"));
cList.add(new CityBean(4,"长春"));
response.setContentType("text/html;charset=utf-8");
//[{"id":1,"name":"北京"},{"id":2,"name":"上海"},{"id":3,"name":"深圳"},{"id":4,"name":"长春"}]
response.getWriter().write(JSONArray.fromObject(cList).toString());
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 获取城市信息
* @param request
* @param response
*/
private void getCityName(HttpServletRequest request,
HttpServletResponse response) {
try {
List<CityBean> cList = new ArrayList<CityBean>();
cList.add(new CityBean(1,"北京"));
cList.add(new CityBean(2,"上海"));
cList.add(new CityBean(3,"深圳"));
cList.add(new CityBean(4,"长春"));
int id = Integer.parseInt(request.getParameter("id"));
for(CityBean city:cList) {
if(id == city.getId()) {
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(JSONObject.fromObject(city).toString());
}
}
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 获取全部用户信息
*
* @param request
* @param response
*/
private void getList(HttpServletRequest request,
HttpServletResponse response) {
try {
//当前页码
int currentPage = Integer.parseInt(request.getParameter("page"));
//每页显示的大小
int pageSize = Integer.parseInt(request.getParameter("rows"));
// 获取分页显示的用户信息
List<TUserBean> uList = uDao.queryByPagination(currentPage, pageSize);
//获取总用户数
int total = uDao.getTotal();
// json格式 --> {"total":10,"rows":[{},{}]}
String json = "{\"total\":" + total + ",\"rows\":"
+ JSONArray.fromObject(uList).toString() + "}";
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (Exception e) {
e.printStackTrace();
}
}
}
6、界面展示
