1、简单数据展现效果图
2、应用程序目录结构
3、需要引入的jquery-easyui-1.2.6版本
4、需要引入的json包
5、用户表结构
6、用户表初始化数据
7、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; } }8、jdbc.properties
jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/easyui jdbc.username=root jdbc.password=root9、com.easyui.util.DBUtil.java
package com.easyui.util; import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.Properties; /** * 数据库操作工具类 * @author LiPiaoShui */ public class DBUtil { // 数据库连接地址 private static String URL; // 数据库用户名 private static String USERNAME; // 数据库密码 private static String PASSWORD; // 数据库驱动名 private static String DRIVER; // 构造函数私有化 private DBUtil() { } static { try { // 加载配置文件中的数据库连接信息 InputStream inStream = DBUtil.class.getClassLoader().getResourceAsStream("jdbc.properties"); Properties prop = new Properties(); prop.load(inStream); URL = prop.getProperty("jdbc.url"); USERNAME = prop.getProperty("jdbc.username"); PASSWORD = prop.getProperty("jdbc.password"); DRIVER = prop.getProperty("jdbc.driver"); // 使用静态代码块加载数据库驱动 Class.forName(DRIVER); } catch (Exception e) { e.printStackTrace(); } } /** * 获取数据库连接 * * @return */ public static Connection getConnection() { Connection conn = null; try { conn = DriverManager.getConnection(URL, USERNAME, PASSWORD); } catch (SQLException e) { e.printStackTrace(); } return conn; } /** * 关闭资源 * * @param rs * @param stmt * @param conn */ public static void close(ResultSet rs, Statement stmt, Connection conn) { try { if (rs != null) { rs.close(); } if (stmt != null) { stmt.close(); } if (conn != null) { conn.close(); } } catch (SQLException e) { e.printStackTrace(); } } }10、com.easyui.dao.UserDao.java
package com.easyui.dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import com.easyui.bean.TUserBean; import com.easyui.util.DBUtil; /** * 用户数据库操作类 * @author LiPiaoShui */ public class UserDao { /** * 获取全部用户信息 * @return */ public List<TUserBean> getList() { Connection conn = null; PreparedStatement pstmt = null; ResultSet rs = null; List<TUserBean> uList = new ArrayList<TUserBean>(); try { String sql = "select * from t_user"; conn = DBUtil.getConnection(); pstmt = conn.prepareStatement(sql); rs = pstmt.executeQuery(); while(rs.next()) { TUserBean user = new TUserBean(); user.setId(rs.getInt("id")); user.setUsername(rs.getString("username")); user.setPassword(rs.getString("password")); user.setSex(rs.getString("sex")); user.setAge(rs.getInt("age")); user.setBirthday(rs.getString("birthday")); user.setCity(rs.getInt("city")); user.setSalary(rs.getString("salary")); user.setStarttime(rs.getString("starttime")); user.setEndtime(rs.getString("endtime")); user.setDescription(rs.getString("description")); uList.add(user); } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(rs, pstmt, conn); } return uList; } }11、com.easyui.servlet.UserServlet.java
package com.easyui.servlet; import java.io.IOException; 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 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); } } /** * 获取全部用户信息 * * @param request * @param response */ private void getList(HttpServletRequest request, HttpServletResponse response) { try { // 获取全部用户信息 List<TUserBean> uList = uDao.getList(); // json格式 --> {"total":10,"rows":[{},{}]} String json = "{\"total\":" + uList.size() + ",\"rows\":" + JSONArray.fromObject(uList).toString() + "}"; response.setContentType("text/html;charset=utf-8"); response.getWriter().write(json); } catch (IOException e) { e.printStackTrace(); } } }12、web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>UserServlet</servlet-name> <servlet-class>com.easyui.servlet.UserServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>UserServlet</servlet-name> <url-pattern>/UserServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>13、WebContent/jsp/datagrid_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() { $('#t_user').datagrid({ url:'<%=root %>/UserServlet?method=getList', //后台访问地址 title:'用户列表', //表格标题 width:1000, //表格宽度 height:400, //表格高度 fitColumns:true, //自动扩展或收缩列的大小以适应网格宽度和防止水平滚动条 columns:[[ //定义对应后台传过来的列名(field),表格列的名字(title),表格宽度(width),表格列的对齐方式(align) {field:'username',title:'用户名',width:100}, {field:'password',title:'密码',width:100}, {field:'age',title:'年龄',width:100,align:'right'}, {field:'sex',title:'性别',width:50}, {field:'birthday',title:'生日',width:100}, {field:'city',title:'所属城市',width:100,align:'right'}, {field:'salary',title:'薪水',width:100}, {field:'starttime',title:'开始时间',width:180}, {field:'endtime',title:'结束时间',width:180}, {field:'description',title:'个人描述',width:150} ]] }); }); </script> </head> <body> <table id="t_user"></table> </body> </html>