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=root
9、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>