07-EasyUI尚硅谷-datagrid的CRUD操作
增删改查：
一、数据库名称：easyui，脚本：
CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(50) DEFAULT NULL, `password` varchar(50) DEFAULT NULL, `sex` varchar(10) DEFAULT NULL, `age` int(10) DEFAULT NULL, `birthday` varchar(50) DEFAULT NULL, `city` varchar(50) DEFAULT NULL, `salary` decimal(50,0) DEFAULT NULL, `starttime` varchar(100) DEFAULT NULL, `endtime` varchar(100) DEFAULT NULL, `description` varchar(500) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=245 DEFAULT CHARSET=utf8;
二、jar包
commons-beanutils.jar commons-collections-3.1.jar commons-lang-2.3.jar commons-logging-1.0.4.jar ezmorph-1.0.4.jar json-lib-2.2.2-jdk15.jar mysql-connector-java-3.1.13-bin.jar
三、工程结构：
各文件：
User.java：
public class User implements Serializable {
private String id;
private String username;
private String password;
private String sex;
private String age;
private String birthday;
private String city;
private String salary;
private String starttime;
private String endtime;
private String description;
UserServlet.java：
package sxt.easyui.servlet;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
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 sxt.easyui.model.User;
import sxt.easyui.util.DBHelper;
import sxt.easyui.util.JsonUtil;
import com.mysql.jdbc.PreparedStatement;
@SuppressWarnings("serial")
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String method = req.getParameter("method");
if ("addUser".equals(method)) {
this.saveUser(req, resp);
} else if ("findUserList".equals(method)) {
// 查询用户列表
List<User> userList = this.findUserListByCondictions(req, resp, null, null, null);
int total = this.getTotalByCondictions(req, resp, null, null, null);
String result = this.transToJsonStr(userList, total);
if (!"".equals(resp)) {
resp.setContentType("text/html;charset=utf-8");
//Thread.sleep(2000); // 测试用
resp.getWriter().write(result);
}
} else if("editUser".equals(method)) {
this.editUser(req, resp);
} else if("deleteUserByIds".equals(method)) {
String ids = req.getParameter("ids");
this.deleteUserByIds(req, resp, ids);
} else if("findUserListByCondictions".equals(method)) {
String username = req.getParameter("username");
String starttime = req.getParameter("starttime");
String endtime = req.getParameter("endtime");
// 这里可以把条件封装成一个POJO, 或者放到一个Map集合中遍历
List<User> userList = this.findUserListByCondictions(req, resp, username, starttime, endtime);
int total = this.getTotalByCondictions(req, resp, username, starttime, endtime);
String result = this.transToJsonStr(userList, total);
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write(result);
} else {
try {
throw new Exception("请求失败！");
} catch (Exception e) {
e.printStackTrace();
}
}
}
private String transToJsonStr(List<User> userList, int total) {
String result = "";
// 将userList转换成json字串数组
try {
// {"total":239,"rows":[{"":"","":""},{},{}]}
// 把List转换成JSON字串数组
String jsonStr = JsonUtil.Object2JsonStr(userList);
result = "{\"total\":"+total+",\"rows\":"+jsonStr+"}";
} catch (Exception e) {
e.printStackTrace();
}
return result;
}
// 综合查询用户列表
private List<User> findUserListByCondictions(HttpServletRequest req,
HttpServletResponse resp, String username, String starttime,
String endtime) {
// 接收分页参数【使用easyui框架，浏览器自动传递分页参数】
int currentPage = Integer.parseInt(req.getParameter("page"));
int pageSize = Integer.parseInt(req.getParameter("rows"));
// 排序字段
String sort = req.getParameter("sort");
// 升序还是降序
String order = req.getParameter("order");
if (order == null || "".equals(order)) {
order = "DESC";
}
if (currentPage < 0 || pageSize < 0) {
currentPage = 1;
pageSize = 10;
}
String sql = "";
if (username == null && starttime == null && endtime == null) { // 第一次进来
sql = "SELECT * FROM user";
if (sort != null && !"".equals(sort)) {
sql += " ORDER BY " + sort;
}
if (order != null && !"".equals(order)) {
sql += " " + order;
}
sql += " LIMIT ?,?";
} else { // 条件查询
// 拼接sql语句
sql = "SELECT * FROM user WHERE 1=1 ";
if (username != null && !"".equals(username)) {
sql += "AND username LIKE '%"+username+"%' ";
}
if (starttime != null && !"".equals(starttime)) {
sql += "AND starttime >= '"+starttime+"' ";
}
if (endtime != null && !"".equals(endtime)) {
sql += "AND endtime <= '"+endtime+"'";
}
if (sort != null && !"".equals(sort)) {
sql += " ORDER BY " + sort;
}
if (order != null && !"".equals(order)) {
sql += " " + order;
}
if (currentPage > 0 && pageSize > 0) {
sql += " LIMIT ?,?";
}
}
Connection conn = DBHelper.getConn();
PreparedStatement ps = (PreparedStatement) DBHelper.prepare(conn, sql);
try {
ps.setInt(1, (currentPage-1)*pageSize);
ps.setInt(2, pageSize);
} catch (SQLException e1) {
e1.printStackTrace();
}
// 查询用户列表
List<User> userList = new ArrayList<User>();
try {
ResultSet rs = ps.executeQuery();
while (rs.next()) {
String id = rs.getString("id");
username = rs.getString("username");
String password = rs.getString("password");
String sex = rs.getString("sex");
String age = String.valueOf(rs.getInt("age"));
String birthday = rs.getString("birthday");
String city = rs.getString("city");
String salary = rs.getString("salary");
starttime = rs.getString("starttime");
endtime = rs.getString("endtime");
String description = rs.getString("description");
User user = new User(id, username, password, sex, age, birthday, city, salary, starttime, endtime, description);
userList.add(user);
}
return userList;
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
// 批量删除用户
private void deleteUserByIds(HttpServletRequest req, HttpServletResponse resp, String ids) {
Connection conn = DBHelper.getConn();
String sql = "DELETE FROM user WHERE id IN("+ids+")";
PreparedStatement ps = (PreparedStatement) DBHelper.prepare(conn, sql);
String result = "{\"status\":\"操作失败！\"}";
resp.setContentType("text/html;charset=utf-8");
try {
int count = ps.executeUpdate();
if (ids.split(",").length == count) {
result = "{\"status\":\"操作成功！\"}";
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
resp.getWriter().write(result);
DBHelper.close(ps);
DBHelper.close(conn);
} catch (IOException e) {
e.printStackTrace();
}
}
}
// 编辑用户
private void editUser(HttpServletRequest req, HttpServletResponse resp) {
// 接收表单数据
String id = req.getParameter("id");
String username = req.getParameter("username");
String password = req.getParameter("password");
String sex = req.getParameter("sex");
String age = req.getParameter("age");
String birthday = req.getParameter("birthday");
String city = req.getParameter("city");
String salary = req.getParameter("salary");
String starttime = req.getParameter("starttime");
String endtime = req.getParameter("endtime");
String description = req.getParameter("description");
// 插入记录
Connection conn = DBHelper.getConn();
String sql = "UPDATE user SET username=?,password=?,sex=?,age=?,birthday=?,city=?,salary=?,starttime=?,endtime=?,description=? WHERE id=?";
PreparedStatement ps = (PreparedStatement) DBHelper.prepare(conn, sql);
resp.setContentType("text/html;charset=utf-8");
String str = "";
try {
ps.setString(1, username);
ps.setString(2, password);
ps.setString(3, sex);
ps.setString(4, age);
ps.setString(5, birthday);
ps.setString(6, city);
ps.setString(7, salary);
ps.setString(8, starttime);
ps.setString(9, endtime);
ps.setString(10, description);
ps.setString(11, id);
// int a = 1/0; // 操作失败演示
int count = ps.executeUpdate();
// 用户添加成功后返回：{"status":"ok","message":"操作成功！"}，失败返回：// 用户添加成功后返回：{"status":"error","message":"操作失败！"}
if (count == 1) {
str = "{\"status\":\"ok\",\"message\":\"操作成功！\"}";
} else {
str = "{\"status\":\"error\",\"message\":\"操作失败！\"}";
}
} catch (Exception e) {
str = "{\"status\":\"error\",\"message\":\"操作失败！\"}";
e.printStackTrace();
} finally {
// 不管操作成功或者失败，都会执行这里的代码
try {
resp.getWriter().write(str);
} catch (IOException e) {
e.printStackTrace();
}
DBHelper.close(ps);
DBHelper.close(conn);
}
}
// 获取总记录数
private int getTotalByCondictions(HttpServletRequest req, HttpServletResponse resp,
String username, String starttime, String endtime) {
Connection conn = DBHelper.getConn();
String sql = "";
if (username == null && starttime == null && endtime == null) { // 第一次进来
sql = "SELECT COUNT(*) FROM user";
} else { // 条件查询
// 拼接sql语句
sql = "SELECT COUNT(*) FROM user WHERE 1=1 ";
if (username != null && !"".equals(username)) {
sql += "AND username LIKE '%"+username+"%' ";
}
if (starttime != null && !"".equals(starttime)) {
sql += "AND starttime >= '"+starttime+"' ";
}
if (endtime != null && !"".equals(endtime)) {
sql += "AND endtime <= '"+endtime+"' ";
}
}
PreparedStatement ps = (PreparedStatement) DBHelper.prepare(conn, sql);
int count = 0;
ResultSet rs = null;
try {
rs = ps.executeQuery();
if (rs.next()) {
count = rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBHelper.close(rs);
DBHelper.close(ps);
DBHelper.close(conn);
}
return count;
}
// 获取用户列表
/*
private List<User> findUserListByCondi(HttpServletRequest req, HttpServletResponse resp) {
// 接收分页参数
int currentPage = Integer.parseInt(req.getParameter("page"));
int pageSize = Integer.parseInt(req.getParameter("rows"));
if (currentPage < 0 || pageSize < 0) {
currentPage = 1;
pageSize = 10;
}
Connection conn = DBHelper.getConn();
String sql = "SELECT * FROM user LIMIT ?,?";
PreparedStatement ps = (PreparedStatement) DBHelper.prepare(conn, sql);
try {
ps.setInt(1, (currentPage-1)*pageSize);
ps.setInt(2, pageSize);
} catch (SQLException e1) {
e1.printStackTrace();
}
// 查询用户列表
List<User> userList = new ArrayList<User>();
try {
ResultSet rs = ps.executeQuery();
while (rs.next()) {
String id = rs.getString("id");
String username = rs.getString("username");
String password = rs.getString("password");
String sex = rs.getString("sex");
String age = String.valueOf(rs.getInt("age"));
String birthday = rs.getString("birthday");
String city = rs.getString("city");
String salary = rs.getString("salary");
String starttime = rs.getString("starttime");
String endtime = rs.getString("endtime");
String description = rs.getString("description");
User user = new User(id, username, password, sex, age, birthday, city, salary, starttime, endtime, description);
userList.add(user);
}
return userList;
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}*/
// 新增用户
private void saveUser(HttpServletRequest req, HttpServletResponse resp) {
// 接收表单数据
String username = req.getParameter("username");
String password = req.getParameter("password");
String sex = req.getParameter("sex");
String age = req.getParameter("age");
String birthday = req.getParameter("birthday");
String city = req.getParameter("city");
String salary = req.getParameter("salary");
String starttime = req.getParameter("starttime");
String endtime = req.getParameter("endtime");
String description = "";
try {
description = new String(req.getParameter("description").getBytes("ISO-8859-1"), "UTF-8");
} catch (UnsupportedEncodingException e1) {
e1.printStackTrace();
}
// 插入记录
Connection conn = DBHelper.getConn();
String sql = "INSERT INTO user(username, password, sex, age, birthday, city, salary, starttime, endtime, description) "
+ "VALUES('"+username+"','"+password+"','"+sex+"','"+age+"','"+birthday+"','"+city+"','"+salary+"','"+starttime
+"','"+endtime+"','"+description+"')";
PreparedStatement ps = (PreparedStatement) DBHelper.prepare(conn, sql);
resp.setContentType("text/html;charset=utf-8");
String str = "";
try {
// int a = 1/0; // 操作失败演示
int count = ps.executeUpdate();
// 用户添加成功后返回：{"status":"ok","message":"操作成功！"}，失败返回：// 用户添加成功后返回：{"status":"error","message":"操作失败！"}
if (count == 1) {
str = "{\"status\":\"ok\",\"message\":\"操作成功！\"}";
} else {
str = "{\"status\":\"error\",\"message\":\"操作失败！\"}";
}
} catch (Exception e) {
str = "{\"status\":\"error\",\"message\":\"操作失败！\"}";
e.printStackTrace();
} finally {
// 不管操作成功或者失败，都会执行这里的代码
try {
resp.getWriter().write(str);
} catch (IOException e) {
e.printStackTrace();
}
DBHelper.close(ps);
DBHelper.close(conn);
}
}
}
DBHelper.java：
package sxt.easyui.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class DBHelper {
// 数据库连接参数
public static final String DRIVERCLASS = "com.mysql.jdbc.Driver";
public static final String URL = "jdbc:mysql://localhost:3306/easyui?useUnicode=true&characterEncoding=utf-8";
public static final String USRENAME = "root";
public static final String PASSWORD = "123456";
// Connection
public static Connection getConn() {
Connection conn = null;
try {
Class.forName(DRIVERCLASS);
conn = DriverManager.getConnection(URL, USRENAME, PASSWORD);
} catch (Exception e) {
e.printStackTrace();
}
return conn;
}
// PrepareStatement
public static PreparedStatement prepare(Connection conn, String sql) {
PreparedStatement ps = null;
try {
ps = conn.prepareStatement(sql);
} catch (SQLException e) {
e.printStackTrace();
}
return ps;
}
// 关闭数据库, 释放资源
public static void close(ResultSet rs) {
if (rs != null) {
try {
rs.close();
rs = null;
} catch (Exception e) {
e.printStackTrace();
}
}
}
public static void close(PreparedStatement ps) {
if (ps != null) {
try {
ps.close();
ps = null;
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public static void close(Connection conn) {
if (conn != null) {
try {
conn.close();
conn = null;
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
JsonUtil.java：
package sxt.easyui.util;
import java.util.List;
import net.sf.json.JSONArray;
// json工具类
public class JsonUtil {
// 把List转换成json字串数组
public static String Object2JsonStr(List<?> list) throws Exception {
String jsonStr = null;
/*if (list != null && list.size() > 0) {
jsonStr = JSONArray.fromObject(list).toString();
}*/
jsonStr = JSONArray.fromObject(list).toString();
return jsonStr;
}
}
commons.js：
// 重写了校验器
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
// 校验器，value：用户输入的内容 param：定义的校验数组
validator: function(value, param) {
return value.length >= param[0] && value.length <= param[1];
},
// 如果出错，显示的提示信息
message: "用户名必须在2-5个字符之间！"
},
equalLength: {
// 校验器，value：用户输入的内容 param：定义的校验数组
validator: function(value, param) {
return value.length == param[0];
},
// 如果出错，显示的提示信息
message: "密码必须是4位字符！"
}
});
city_data.json：
[
{
"id": 1,
"text": "东莞"
},
{
"id": 2,
"text": "广州"
},
{
"id": 3,
"text": "深圳"
},
{
"id": 4,
"text": "珠海"
},
{
"id": 5,
"text": "佛山"
}
]
007_datagrid_crud.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Datagrid</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css">
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<!-- myJs -->
<script type="text/javascript" src="js/myJs/commons.js"></script>
<script type="text/javascript">
var method; // undefined，区分新增用户和修改用户
$(function() {
// 2.使用datagrid(), 发起请求并展示列表
$("#userList").datagrid({
idField: "id", // 标识字段，只要创建数据表格，就要配置这一项，如果指定了这个字段，那么翻页的时候会自动记录所有选中的记录
title: "用户列表",
//width: 1000,
//fit: true,
height: 515,
url: "UserServlet?method=findUserList", // 异步请求的地址
striped: true, // 隔行变色
nowrap: true, // 默认情况下，当数据在同一行放不下，会折行放很多行显示，设置为true，不管多长的数据都显示在一行
loadMsg: "正在加载，请稍等...",
rownumbers: true, // 行号
//singleSelect: true, // 只允许选择表格中的一行
// 字段排序
//remoteSort: false, // 1.取消本地排序，本地排序，即后台json数据是什么顺序，将来在页面就按什么顺序展示
sortName: "salary", // 2.指定排序的列字段名称
sortOrder: "DESC", // 3.指定是按升序还是降序排序，默认是asc，即升序
// 满足条件的行记录，改变其样式，如：超级管理员的行记录背景颜色改成：#FFAEB9
rowStyler: function(index, recode) {
if (recode.username == "super") {
return "background:#FFAEB9";
}
},
// =========================================================
// 分页
pagination: true, // 表示打开分页特性
pageList: [5,10,15,20,30,50], // 每页显示多少条记录，自定义
pageSize: 20, // 设置初始化一页显示的记录数
// =========================================================
fitColumns: true, // 自适应列宽
// 表格的列，是个二维数组，数组中是一个个对象，field的value值要和POJO中的属性值一致
/* frozenColumns: [[ // 冻结列特性(用于列比较多的情况)不能和fitColumns属性一起使用，否则看不到效果
{
field: "username",
title: "用户名",
width: 100
}
]], */
columns: [[
{ // 复选框，这个特性不要和singleSelect特性一起使用，否则只能选择一条记录
field: "ck",
width: 50,
checkbox: true
},
{
field: "username",
title: "用户名",
width: 100,
styler: function(value, recode) {
if ("admin" == value) {
return "background:#FF83FA";
}
}
},
{
field: "password",
title: "密码",
width: 100,
hidden: true
},
{
field: "sex",
title: "性别",
width: 50,
formatter: function(value, recode, index) {
if (value == 1) {
return "<span style='color:red;'>男</span>";
} else if (value == 2) {
return "<span style='color:green;'>女</span>";
}
}
},{
field: "age",
title: "年龄",
width: 50
},{
field: "birthday",
title: "生日",
width: 150,
sortable: true
},{
field: "city",
title: "所属城市",
width: 100,
formatter: function(value, recode, index) {
// 如果城市很多，这样代码很繁琐，可以把城市放到一个js文件中，然后获取这个js文件，得到城市的数组，最后遍历得到
if (value == 1) {
return "东莞";
} else if (value == 2) {
return "广州";
} else if (value == 3) {
return "深圳";
} else if (value == 4) {
return "珠海";
} else if (value == 5) {
return "佛山";
}
}
},{
field: "salary",
title: "薪水",
width: 100,
sortable: true
},{
field: "starttime",
title: "开始时间",
width: 150
},{
field: "endtime",
title: "结束时间",
width: 150
},{
field: "description",
title: "个人描述",
width: 150,
formatter: function(value, recode, index) {
return "<span title="+value+">"+value+"</span>";
}
}
]],
// CRUD ========================================================上
// 添加crud按钮
toolbar: [
{
text: "新增用户",
iconCls: "icon-add",
handler: function() {
method = "addUser";
// 清空表单数据
$("#userForm").find("input[name!='sex']").val(""); // 方法1
//$("#userForm").get(0).reset(); // 方法2：会有记忆
//$("#userForm").form('clear'); // 方法3：会把其他非input的value也清空
// 点击新增用户按钮，弹出新增用户的表单
$("#addUserDialog").dialog({
title: "新增用户"
});
$("#addUserDialog").dialog("open");
}
},{
text: "删除用户",
iconCls: "icon-remove",
handler: function() {
var users = $("#userList").datagrid("getSelections");
if (users.length <= 0) {
$.messager.show({
title: "提示信息",
msg: "至少选择一行记录进行删除！"
});
} else {
$.messager.confirm("提示信息", "确定删除吗？", function(r) {
if (r) {
var ids = "";
for (var i=0; i<users.length; i++) {
ids += users[i].id + ",";
}
ids = ids.substring(0, ids.length-1);
var url = "UserServlet?method=deleteUserByIds";
var args = {"time": new Date(), "ids": ids};
$.post(url, args, function(result) { // 返回的数据：成功：{"status":"操作成功！"}, 失败：{"status":"操作失败！"}
// 要清空之前选择的idField，否则会叠加（或者直接清空数组）
//users.splice(0, users.length);
$("#userList").datagrid("unselectAll");
// 刷新页面
$("#userList").datagrid("reload");
// 给提示信息
var jsonObj = eval("("+result+")");
$.messager.show({
title: "提示信息",
msg: jsonObj.status
});
});
} else {
return;
}
});
}
}
},{
text: "修改用户",
iconCls: "icon-edit",
handler: function() {
method = "editUser";
// 校验只能选择一行记录进行修改
var arr = $("#userList").datagrid("getSelections");
if (arr.length == 1) {
// 修改dialog的标题
$("#addUserDialog").dialog({
title: "修改用户"
});
// 弹出添加用户的表单
$("#addUserDialog").dialog("open");
// 清空表单
$("#userForm").find("input[name!='sex']").val("");
// 表单数据回显
var user = arr[0];
$("#userForm").form("load", {
id: user.id,
username: user.username,
password: user.password,
sex: user.sex,
age: user.age,
birthday: user.birthday,
city: user.city,
salary: user.salary,
starttime: user.starttime,
endtime: user.endtime,
description: user.description
});
} else {
$.messager.show({
title: "提示信息",
msg: "只能选择一行记录进行修改！"
});
}
}
},{
text: "查询用户",
iconCls: "icon-search",
handler: function() {
$("#layout").layout("expand", "north");
}
}
]
// CRUD ========================================================下
});
// 新增用户表单js校验-----------------------------------------------------上
// 新增用户的dialog
$("#addUserDialog").dialog({
title: "新增用户",
width: 320,
closed: "true",
modal: true,
draggable: false
});
// 用户名和密码校验器
$("#userTable input[name='username']").validatebox({
required: true,
validType: 'minLength[2,5]',
missingMessage: '用户名必填'
});
$("#userTable input[name='password']").validatebox({
required: true,
validType: 'equalLength[4]',
missingMessage: '密码必填'
});
// 年龄
$("#userTable input[name='age']").numberbox({
min: 1,
max: 200,
required: true,
missingMessage: '年龄必填'
});
// 生日
$("#userTable input[name='birthday']").datetimebox({
required: true,
missingMessage: '生日必填',
// 只可选择，禁止输入
editable: false
});
// 下拉框(查看easyui.css文件中的combobox-item-hover的css，可以设置鼠标悬停在下拉选项上的颜色)
$("#userTable input[name='city']").combobox({
url: 'json/city_data.json', // 这个json文件的编码一定要是utf-8，否则会中文乱码，右键-Properties-设置utf-8
valueField: 'id', // 对应json文件中的key
textField: 'text', // 对应json文件中的key
value: '请选择',
editable: false
});
// 薪水
$("#userTable input[name='salary']").numberbox({
min: 2000,
max: 20000,
required: true,
missingMessage: '薪水必填',
precision: 2
});
// 时间日期控件
$("#userTable input[name='starttime'], #userTable input[name='endtime']").datetimebox({
required: true,
missingMessage: '时间必填',
// 只可选择，禁止输入
editable: false,
// 开始时间不能迟于结束时间
// ...
});
// 个人描述
$("#userTable input[name='description']").validatebox({
required: true,
validType: 'minLength[5,50]',
missingMessage: '个人描述必填',
invalidMessage: '个人描述必须在5-50个字符之间！' // 这里使用invalidMessage覆盖掉用户名中的提示信息【原来的不变，只改变这里的提示内容】
});
// 新增用户表单js校验-----------------------------------------------------下
// 关闭新增用户窗口
$("#closeDialog").click(function() {
$("#addUserDialog").dialog('close');
});
// 新增用户提交表单
/* 【============================注意：这种先定义表单再提交表单的方式，动态url无法设定============================】
$("#userForm").form({ // 定义表单
url: method=="addUser"?"UserServlet?method=addUser":"UserServlet?method=editUser",
onSubmit: function() {
// 如果表单校验不通过，就阻止表单提交
if (!$("#userForm").form('validate')) {
$.messager.show({
title: "提示信息",
msg: "验证没有通过，不能提交表单！"
});
return false; // 阻止提交
}
},
success: function(result) {
var result = $.parseJSON(result);
// 提交成功后关闭dialog
$("#addUserDialog").dialog('close');
// 刷新datagrid
$("#userList").datagrid('reload');
// 操作成功提示信息
$.messager.show({
title: result.status,
msg: result.message
});
},
error: function(result) {
var result = $.parseJSON(result);
$.messager.show({
title: result.status,
msg: result.message
});
}
});
* 【============================注意：这种先定义表单再提交表单的方式，动态url无法设定============================】
*/
// 回车提交表单
$("#userForm").find("input").on("keyup", function(event) {
if (event.keyCode == 13) {
//$("#userForm").submit();
// 如果表单校验不通过，就阻止表单提交
userFormSubmit();
}
});
// 点击保存按钮提交表单
$("#confirmBtn").click(function() {
//$("#userForm").submit();
userFormSubmit()
});
// 查询用户
// 清空查询条件
$("#resetBth").click(function() {
$("#searchUserForm").form("clear");
});
// 提交查询
$("#searchUser").click(function() {
var username = $("#searchUserForm input[name='username']").val();
var starttime = $("#searchUserForm input[name='starttime']").val();
var endtime = $("#searchUserForm input[name='endtime']").val();
var starttimeStr = starttime.replace(/-/g, "/"); // /g表示全局，/-表示短横线，总体表示用户/替换掉所有的-
var endtimeStr = endtime.replace(/-/g, "/");
var starttimeDateTime = new Date(starttimeStr);
var endtimeDateTime = new Date(endtimeStr);
if (starttimeDateTime > endtimeDateTime) {
$.messager.confirm("提示信息", "结束时间不能早于开始时间！", "info", function() {
$("#searchUserForm").find("input[name!='username']").val("");
});
} else {
// 重新指定datagrid的请求方法$("#userList").datagrid("options").url="XXX"的方式
$("#userList").datagrid("options").url = "UserServlet?method=findUserListByCondictions";
// 发送请求
$("#userList").datagrid("load", serializeForm($("#searchUserForm")));
}
});
});
// 提交表单
function userFormSubmit() {
if (!$("#userForm").form('validate')) {
$.messager.show({
title: "提示信息",
msg: "验证没有通过，不能提交表单！"
});
return false; // 阻止提交
}
// 提交表单
$.ajax({
type: "post", // 提交方式
url: "UserServlet?method=" + method, // 提交地址
cache: false, // 是否缓存
data: $("#userForm").serialize(), // 提交的数据，这里不需要一个个去构造js对象/json串，直接将表单序列化成username=xxx&password=xxx的字串
dataType: "text", // 请求成功后响应的数据类型，可以是text/html/xml/json等等
success: function(result) {
var result = $.parseJSON(result);
// 提交成功后关闭dialog
$("#addUserDialog").dialog('close');
// 刷新datagrid
$("#userList").datagrid('reload');
// 操作成功提示信息
$.messager.show({
title: result.status,
msg: result.message
});
},
error: function(result) {
var result = $.parseJSON(result);
$.messager.show({
title: result.status,
msg: result.message
});
}
});
}
//js方法：序列化表单 ，把表单传递进来，就可以得到一个表单的js对象，如$("#userForm");
function serializeForm(form){
var obj = {};
$.each(form.serializeArray(),function(index){
if(obj[this['name']]){
obj[this['name']] = obj[this['name']] + ','+this['value'];
} else {
obj[this['name']] =this['value'];
}
});
return obj;
}
</script>
</head>
<body style="margin: 0px 0px 0px 0px;"><!-- 让body填充整个屏幕 -->
<div id="layout" class="easyui-layout" style="width:100%;" fit="true">
<div region="north" style="height: 100px;" title="用户查询" collapsed="true">
<form id="searchUserForm" action="" method="post">
<table id="searchUserTable" align="left" style="margin-top: 15px;" cellpadding="5px;">
<tr>
<td>用户名：<input type="text" name="username"/></td>
<td>开始时间：<input type="text" name="starttime" class="easyui-datetimebox" editable="false" style="width: 150px;"/></td>
<td>结束时间：<input type="text" name="endtime" class="easyui-datetimebox" editable="false" style="width: 150px;"/></td>
<td><a id="searchUser" class="easyui-linkbutton">查询</a></td>
<td><a id="resetBth" class="easyui-linkbutton">清空</a></td>
</tr>
</table>
</form>
</div>
<div region="center">
<!-- 1.定义一个用户table -->
<table id="userList"></table>
</div>
</div>
<!-- 新增用户的dialog -->
<div id="addUserDialog">
<form action="" method="post" id="userForm" class="easyui-form">
<input type="hidden" name="id"/>
<table id="userTable" style="text-align: right;padding: 20px;" cellpadding="3px;" cellspacing="5px;">
<tr>
<td>用户名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="1" checked="checked"/> 男
<input type="radio" name="sex" value="2"/> 女
</td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" name="age"/></td>
</tr>
<tr>
<td>生日：</td>
<td><input type="text" name="birthday" style="width: 150px;"/></td>
</tr>
<tr>
<td>所属城市：</td>
<td>
<input type="text" name="city" style="width: 150px;"/>
</td>
</tr>
<tr>
<td>薪水：</td>
<td><input type="text" name="salary"/></td>
</tr>
<tr>
<td>开始时间：</td>
<td><input type="text" name="starttime" style="width: 150px;"/></td>
</tr>
<tr>
<td>结束时间：</td>
<td><input type="text" name="endtime" style="width: 150px;"/></td>
</tr>
<tr>
<td>描述：</td>
<td><input type="text" name="description"/></td>
</tr>
<tr>
<td colspan="2">
<a id="confirmBtn" class="easyui-linkbutton" style="margin-top: 20px;">确定</a>
<a id="closeDialog" class="easyui-linkbutton" style="margin-top: 20px;">取消</a>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
web.xml：
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>Easyui</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>UserServlet</servlet-name> <servlet-class>sxt.easyui.servlet.UserServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>UserServlet</servlet-name> <url-pattern>/UserServlet</url-pattern> </servlet-mapping> </web-app>
效果：在浏览器地址栏输入：http://localhost:8080/Easyui/jsp/007_datagrid_crud.jsp，回车
浙公网安备 33010602011771号