EasyUI2-数据绑定&分页

工具：eclipse,mysql

所需要用到文件和数据库

效果如图所示

数据库

连接各种数据库

config.properties

• t_book.sql

dao包(三层架构)

• BookDao.java

package com.zking.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.zking.dao.IBookDao;
import com.zking.entity.Book;
import com.zking.util.DBAccess;

public class BookDao implements IBookDao{
	private List<Book> listBook;
	private PreparedStatement ps;
	private Connection con;
	private Book book;
	private ResultSet rs;
	private String sql;
	
	@Override
	public List<Book> query(String bookName,int pageIndex,int pageSize) throws Exception{
		
		listBook = new ArrayList<>();
		con = DBAccess.getConnection();
		
		//计算每页开始 的数据条数
		int startIndex = (pageIndex - 1)* pageSize;
		
		//分页的SQL语句
		sql="select bookId,bookName,bookPrice,bookType,bookNamePinYin from t_book limit ?,?";
		
		//如果书本的关键字不为null和空白关键字
		if(null != bookName && "".equals(bookName)) {
			sql += "select bookId,bookName,bookPrice,bookType,bookNamePinYin from t_book where bookName like ? or bookNamePinYin like ? limit ?,? ";
		}
		System.out.println("模糊查询sql语句="+sql);
		ps = con.prepareStatement(sql);
		//给占位符赋值
		if(null != bookName && "".equals(bookName)) {
			ps.setString(1, "%+bookName+%");//书本名称
			ps.setString(2, "%+bookName+%");//书本名称拼音
			ps.setInt(3, startIndex);//开始页数
			ps.setInt(4, pageSize);//页大小        
		}else {
			ps.setInt(1, startIndex);//开始页数
			ps.setInt(2, pageSize);//页大小        
		
		}
		
		ps.setInt(1, startIndex);
		rs = ps.executeQuery();
		while(rs.next()) {
			book = new Book();
			book.setBookid(rs.getInt("bookId"));
			book.setBookname(rs.getString("bookname"));
			book.setBookprice(rs.getString("bookprice"));
			book.setBooktype(rs.getString("bookType"));
			book.setBooknamepinyin(rs.getString("booknamepinyin"));
			listBook.add(book);
		}
		return listBook;
	}
	@Override
	public int getTotalRow(String bookName) throws Exception{
		int TotalRow=0;//数据总条数
		con = DBAccess.getConnection();
		sql = "select count(0) from t_book where 1=1";
		//如果书本的关键字不为null或者空白关键字
		if(null != bookName && "".equals(bookName)) {
			sql = " and where bookName =? or bookNamePinYin like ?";
		}
		ps = con.prepareStatement(sql);
		//给占位符赋值
		if(null != bookName && "".equals(bookName)) {
		ps.setString(1, "%+bookName+%");//书本名称
		ps.setString(2, "%+bookName+%");//书本名称拼音
		}
		System.out.println("查询数据总条数："+sql);
		rs = ps.executeQuery();
		if(rs.next()) {
			TotalRow = rs.getInt(1);
		}
		return TotalRow;
	}
	
}

实体包

• Book.java

package com.zking.entity;

import com.zking.util.PinYinUtil;

public class Book {
	private int bookid;

	private String bookname;

	private String bookprice;

	private String booktype;
	private String booknamepinyin;

	public Book(String bookname, String bookprice, String booktype, String booknamepinyin) {
		super();
		this.bookname = bookname;
		this.bookprice = bookprice;
		this.booktype = booktype;
		this.booknamepinyin = booknamepinyin;
	}

	public String getBooknamepinyin() {
		return booknamepinyin;
	}

	public void setBooknamepinyin(String booknamepinyin) {
		this.booknamepinyin = booknamepinyin;
	}

	public int getBookid() {
		return bookid;
	}

	public void setBookid(int bookid) {
		this.bookid = bookid;
	}

	public String getBookname() {
		return bookname;
	}
//给书本名称bookname属性赋值
	public void setBookname(String bookname) {
		this.bookname = bookname;
		//调用给书本名称拼音属性赋值的方法
		this.setBooknamepinyin(PinYinUtil.toPinyin(bookname));//转换成拼音首字母然后赋值给bookname属性
	}

	public String getBookprice() {
		return bookprice;
	}

	public void setBookprice(String bookprice) {
		this.bookprice = bookprice;
	}

	public String getBooktype() {
		return booktype;
	}

	public void setBooktype(String booktype) {
		this.booktype = booktype;
	}


	public Book(int bookid, String bookname, String bookprice, String booktype, String booknamepinyin) {
		super();
		this.bookid = bookid;
		this.bookname = bookname;
		this.bookprice = bookprice;
		this.booktype = booktype;
		this.booknamepinyin = booknamepinyin;
	}

	public Book(String bookname, String bookprice, String booktype) {
		this.bookname = bookname;
		this.bookprice = bookprice;
		this.booktype = booktype;
	}

	public Book() {
		// TODO Auto-generated constructor stub
	}

	@Override
	public String toString() {
		return "Book [bookid=" + bookid + ", bookname=" + bookname + ", bookprice=" + bookprice + ", booktype="
				+ booktype + ", booknamepinyin=" + booknamepinyin + "]";
	}

}

servlet

• BookServlet.java

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.zking.biz.IBookBiz;
import com.zking.biz.impl.BookBiz;
import com.zking.entity.Book;

@WebServlet("/BookServlet")
public class BookServelt extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		IBookBiz ibb = new BookBiz();
		PrintWriter out = resp.getWriter();
		
		try {
			//获取前天输入的模糊查询关键字
			String bookName = req.getParameter("bookName");
			//获取前台传到后台的当前页码，参数名;page是EasyUI分页组件规定好的参数名
			String page = req.getParameter("page");
			//将前台创来的当前页码变量
			Integer pageIndex = null ==page||"".equals(page)?1:Integer.parseInt(page);
			
//			//以前写法
//			if(null != page || !"".equals(page)) {
//				Integer pageIndex = Integer.parseInt(page);
//			}
//			
			//获取前台传来的页大小，参数名：row是easyui分页组件规定的页大小参数名
			Integer pageSize = Integer.parseInt(req.getParameter("rows"));
			
			//调用模糊查询的方法获取查询数据
			List<Book> listBook = ibb.query(bookName,pageIndex, pageSize);
			
			//调用查询总记录数的方法，获取查询出来的总体数
			int totalRow = ibb.getTotalRow(bookName);
			
			//定义Map集合
			
			Map<String,Object > data = new HashMap<>();//以键值对的形式存储值
			data.put("rows",listBook);//集合数据
			data.put("total",totalRow);//查询出来的数据总条数
			System.out.println(listBook);
			System.out.println(totalRow);
			//将节点结合数据listBook转换成json数据
			String jsonString =	 JSON.toJSONString(data);
			System.out.println(jsonString);
			out.write(jsonString);;
			out.flush();
			out.close();
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
	}
}

工具包util

DBAccess

package com.zking.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;

/**
 * 提供了一组获得或关闭数据库对象的方法
 * 
 */
public class DBAccess {
	private static String driver;
	private static String url;
	private static String user;
	private static String password;

	static {// 静态块执行一次，加载 驱动一次
		try {
			InputStream is = DBAccess.class
					.getResourceAsStream("/config.properties");

			Properties properties = new Properties();
			properties.load(is);

			driver = properties.getProperty("driver");
			url = properties.getProperty("url");
			user = properties.getProperty("user");
			password = properties.getProperty("pwd");

			Class.forName(driver);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	/**
	 * 获得数据连接对象
	 * 
	 * @return
	 */
	public static Connection getConnection() {
		Connection conn = null;
		try {
			conn = DriverManager.getConnection(url, user, password);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return conn;
	}

	public static void close(ResultSet rs) {
		if (null != rs) {
			try {
				rs.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}

	public static void close(Statement stmt) {
		if (null != stmt) {
			try {
				stmt.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}

	public static void close(Connection conn) {
		if (null != conn) {
			try {
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}

	public static void close(Connection con, Statement ps, ResultSet rs) {
		close(rs);
		close(ps);
		close(con);
	}

	public static boolean isOracle() {
		return "oracle.jdbc.driver.OracleDriver".equals(driver);
	}

	public static boolean isSQLServer() {
		return "com.microsoft.sqlserver.jdbc.SQLServerDriver".equals(driver);
	}
	
	public static boolean isMysql() {
		return "com.mysql.jdbc.Driver".equals(driver);
	}

	public static void main(String[] args) {
		Connection conn = DBAccess.getConnection();
		DBAccess.close(conn);
		System.out.println("isOracle：" + isOracle());
		System.out.println("isSQLServer：" + isSQLServer());
		System.out.println("isMysql：" + isMysql());
		System.out.println("数据库连接(关闭)成功");
	}
}

PinYinUtil

package com.zking.util;

import java.util.regex.Pattern;

import net.sourceforge.pinyin4j.PinyinHelper;

/**
 * 拼音工具类，能将汉字转换成拼音的首字母
 */
public class PinYinUtil {
	/* 用于中文判断的正则表达式 */
	private static final String regexStr = "[\u4e00-\u9fa5]";

	/**
	 * 将一个字符串中的汉字转换成拼音首字母、非汉字则不变
	 * 
	 * @param cn
	 *            String
	 * @return String
	 */
	public static String toPinyin(String cn) {
		String pinyin = null;
		if (null == cn || 0 == cn.trim().length()) {
			return pinyin;
		}

		/* 去掉字符串前后的空格 */
		cn = cn.trim();
		char[] chineseCharacterArr = cn.toCharArray(); // 转换成汉字字符数组
		char[] letteCharacterArr = new char[chineseCharacterArr.length]; // 字母字符数组
		for (int i = 0; i < chineseCharacterArr.length; i++) {
			// 得到汉字拼音的首字母
			letteCharacterArr[i] = getFirstLetterFromPinyin(chineseCharacterArr[i]);
		}

		if (0 != letteCharacterArr.length) {
			pinyin = new String(letteCharacterArr);
			pinyin = pinyin.toUpperCase();
		}
		return pinyin;
	}

	/* 得到一个汉字的拼音的首字母 */
	private static char getFirstLetterFromPinyin(char cn) {
		// 判断cn是否为一个合法的汉字,不是则直接返回cn
		if (!isChineseCharacters(cn)) {
			return cn;
		}

		String[] pyArr = PinyinHelper.toHanyuPinyinStringArray(cn);
		char py = pyArr[0].charAt(0);
		return py;
	}

	/**
	 * 判断字符是否为一个汉字
	 * 
	 * @param cn
	 *            char
	 * @return boolean
	 */
	public static boolean isChineseCharacters(char cn) {
		boolean b = false;
		if (Pattern.matches(regexStr, String.valueOf(cn))) {
			b = true;
		}
		return b;
	}

	public static void main(String[] args) {
		String s = "任保存并加入题库";
		System.out.println(PinYinUtil.toPinyin(s).toLowerCase());
	}

}

用户界面

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>Insert title here</title>

<!-- 通过include指令引入公共部分页面的head.jsp -->
<%@ include file="../../../static/common/head.jsp" %>
<!-- 引入index.js -->
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<!-- 布局 -->
	<div id="cc" class="easyui-layout" style="width:100%;height:600px;">   
	    <div data-options="region:'north',title:'网上书城',split:true" style="height:200px;"></div>   
	    <div data-options="region:'south',title:'版权/链接',split:true" style="height:200px;"></div>   
	    <div data-options="region:'east',iconCls:'',title:'East',split:true" style="width:100px;"></div>   
	    <div data-options="region:'west',title:'菜单管理',split:true" style="width:200px; height: 530px;">
	    	<ul id="menuTree" class="easyui-tree"> </ul> 
	    </div>   
	    <div data-options="region:'center',title:'内容区域'" style="padding:5px;width:899px; height:500px;background:#eee;">
	    	<div id="myTab" class="easyui-tabs" style="width:100%;height:100%;">   
			     
			</div>  
	    </div>   
	</div> 
	
</body>

</html>

head.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- base标签的href属性里面的内容会自动添加到在head标签 里面的引入的路径前面 -->
<base href="${pageContext.request.contextPath }/static/"/>   
   
  
<!-- JQuery文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!-- 引入EasyUI相关文件 -->

<!-- 图标库 -->
<link rel="js/jquery-easyui-1.5.5.2/themes/icons.css">

<!-- 样式文件 -->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css">

<!-- js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>


<!-- 1）引入JQuery（jquery.min.js）
2）引入EasyUI（jquery.easyui.min.js）
3）引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）
4）引入EasyUI的样式文件（/themes/default/easyui.css）
5）引入EasyUI的图标样式文件（/themes/icon.css） -->
   
   
<!-- 动态获取项目名，并保存到request作用域里面 --> 
<%
request.setAttribute("ctx", request.getContextPath());
%>
<script type="text/javascript">
//从request作用域里面获取项目名，并赋给一个js变量
var ctx = '${ctx}'
</script>

- 从jQuery-easyui-1.5.2——demo——tree——tree_data1.son/tree_data2.json

bookList.jsp

**<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>Insert title here</title>
</head>
<!-- 通过include指令引入公共部分页面的head.jsp -->
<%@ include file="../../../static/common/head.jsp" %>
<!-- 引入index.js -->
<script type="text/javascript" src="jsp/book/bookList.js"></script>
<body>
	<!-- 查询组件，不需要form表单， 默认的是ajax -->
<div>
	<input id="bookName" class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px"> 
	<a id="btn_search" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>  
</div>
	<!-- 数据表 -->
	<div>
		<table  id ="myTable" class="easyui-datagrid" style="width:100%;height:390px"   
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
    <thead>     
    </thead>   
</table>  
	</div>
</body>
</html>**

js

bookList.js

$(function(){
	//获取表格
	$("#myTable").datagrid({
		//绑定表头：columns列/字段
		//第一个参数
		columns:[[
			{field:'bookid',title:'书本编号',width:100},
			{field:'bookname',title:'书本名称',width:100},
			{field:'bookprice',title:'书本单价',width:100},
			{field:'booktype',title:'书本类型',width:100}
		]],
		//向后台发送ajax请求
		url:ctx+"/BookServlet",
		//分页
		pagination: true,// 设置是否显示分页标签
	    singleSelect:true,// 如果为true，则只允许选择一行(否则点一行选择一行，很丑)
	    loadMsg:"正在加载数据...",//加载数据的时候显示提示消息。
	});
	//给查询按钮添加事件
	$("#btn_search").click(function(){
		query();
	})
	/* 设置分页组件的文字描述  */
	var p = $('#myTable').datagrid('getPager'); 
	$(p).pagination({ 
		pageSize: 10,//每页显示的记录条数，默认为10 
		pageList: [10,20,30,50,60,70,80,90,100],//可以设置可以选择的页大小(下拉框的内容)
		beforePageText: '第',//页数文本框前显示的汉字 
		afterPageText: '页    共 {pages} 页', 
		displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录', 
	}); 
})

//向后台发送模糊查询关键字方法
function query(){
	$('#myTable').datagrid('load',{
		bookName:$("#bookName").val(),
	});
}

index.js

$(function(){
	/*绑定树形菜单绑定数据*/
	/*
	1.没有子节点（自己是子节点）就增加选项卡
	2.要增加的选项卡不重复或者不存在即增加选项卡
	3.选项卡存在，当前点击的节点菜单已经添加了选项卡，那么选项卡切换到当前点击的选项卡
	*/
	
	$("#menuTree").tree({
		//ctx
		//在js里面拼接，在HTML里面${ctx}/
		url:ctx+'/ModuleServlet',//tree_data1.json里面的数据格式必须是JSON格式
		
		//给tree节点添加鼠标单击事件
		onDblClick: function(node){//获取所有节点
			//获取节点的子节点集合(getchildren)--没有子节点就增加一个新的选项卡
			 var children = $("#menuTree").tree("getChildren",node.target);//node.target节点对象
			if(children<=0){//没有子节点,代表是子节点
				//获取选项卡的容器(要增加的选项卡不重复或者不存在即增加选项卡)
				if(	!$('#myTab').tabs("exists",node.text)){//要增加的选项卡不重复或者不存在即增加选项卡)
					// 当点击左侧菜单节点的时候在右侧内容区域添加一个新的选项卡 
					$('#myTab').tabs('add',{    
					    title:node.text,   //选项卡的标题 
					    content:'<iframe frameborder=0 src='+node.url+' style="width:100%;height:100%;"/>',//选项卡的内容    
					    closable:true,    //设置选项卡是否显示关闭按钮，true显示，false：不显示（）默认
					    
					});  
				}else{//选项卡存在，当前点击的节点菜单已经添加了选项卡，那么选项卡切换到当前点击的选项卡
					$("#myTab").tabs("select",node.text);	
				}
				
			}
			
			//alert(node.text);  // 在用户点击的时候提示
		}	
	})
	
	
	
})

jar包