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>
- 大小: 42.5 KB
- 大小: 14.2 KB
- 大小: 21.2 KB
- 大小: 23.4 KB
- 大小: 36.2 KB
- 大小: 18.6 KB
分享到:
相关推荐
SSM+EasayUI-DataGrid表格展现数据库数据。包含后台代码和数据库建表语句
后台数据写成<root><row 姓名='张三' 年龄='22'/> 前台HTML自动显示成表格了...并且无论表头有多少标题都可以扩展,直接导入进eclipse就能用.....
可以将数据库中数据表里的需要显示的数据以表格的形式在网页上得到显示
jsp读取Excel中的数据,以表格形式展现出来,字体,背景,都可以读取出来
解决EasyUIdataGrid列比较多,无数据,列展现不全
提供了若干易用的客户端方法,让你的程序在添加、修改、删除表格数据时无需重新加载大量的表格数据,而仅需要更新客户端展现结果,这样使得程序的后台访问次数大大降低。采用了类似AjaxPro的异步回调方式,使得您...
更改了props 和表格的列定义方式,使其更贴合原生el-transfer 和el-table 的使用。提高了客制化能力,并且使用方式更符合直觉。 安装 npm install bpo-elt-transfer 使用 在main.js文件中引入插件并注册 import ...
1、左侧是表头的表格数据展现, 2、支持多行,多表头 3、固定表头的功能 4、能够支持标题 5、获取表格中的数据 6、支持IE/CHROME
展示需要相比传统的用表格或文档展现数据的方式,数据可视化能将数据以更加直观的方式展现出来。使数据更加客观、更具说服力。在各类报表和说明性文件中,用直观的图表展现数据,显得简洁、可靠。在可视化图表工具的...
滴答表格企业版 是一款面向软件设计人员的表格控件, 拥有 600 多个编程接口, 功能丰富、简单易用,集成了表格产品编辑输入、公式运算、数据显示/展现的特点,同时又兼顾了报表产品的数据源绑定,数据统计和打印...
滴答表格企业版 是一款面向软件设计人员的表格控件, 拥有 600 多个编程接口, 功能丰富、简单易用,集成了表格产品编辑输入、公式运算、数据显示/展现的特点,同时又兼顾了报表产品的数据源绑定,数据统计和打印...
滴答表格目前拥有600多个直接编程接口,几十个子对象,集成了表格控件的编辑展现、公式运算功能,同时又拥有报表组件的数据源绑定、外部数据的导入导出等功能;滴答表格的接口简单易用,类似打开/保存文件,打印,...
提出了一种基于Spark的交互式数据预处理系统,系统提供一套通用的数据预处理组件,并支持组件的扩展,数据以电子表格的形式展现,系统记录用户的处理过程并支持撤销重做.本文从数据模型、数据预处理操作、交互式执行引擎...
excel,java读取excel,jsp读取Excel中的数据,以表格形式展现出来,字体,背景,都可以读取出来
报表:产生关系数据表格、复杂表格、OLAP表格、报告以及各种综合报表;可视 化:用易于理解的点线图、直方图、饼图、网状图、交互式可视化、动态模拟、计算机 动画技术表现复杂数据及其相互关系;统计:进行平均值、...
Python 实现的一个将数据库的数据进行可视化显示的图表,使用流行的canvasjs前端组件,漂亮实用且易集成 数据库为sqlite,框架django,前端jquery+canvasjs
利用pandas将excel中数据抽取,以三元组形式加载到neo4j数据库中构建相关知识图谱
表格,数据,文本集,日志,网址,测量值---这些以及其它类似的信息是每一个数据挖掘流程在一开始就要用到的。准备好的数据会被转化并合并,最后您会得到一个新的或是以不同方式显示出来的数据、模型或报告。在这一...
是一款面向软件设计人员的表格控件, 拥有 600 多个编程接口, 功能丰富、简单易用,集成了表格产品编辑输入、公式运算、数据显示/展现的特点,同时又兼顾了报表产品的数据源绑定,数据统计和打印输出的功能,是管理...
明确目的和思路 先决条件、提供项目方向 01 数据收集 数据库建立 02 数据处理 清洗、转化、提取、计算 03 数据分析 数据统计、数据挖掘 04 数据展现 图标、表格、文字 05 报告撰写 架构清晰、明确za结论、提出建议 ...