【数据表格】-001-简单数据展现

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>