EasyUI(分页&模糊查询)

代码怎么敲啊

已于 2022-04-08 16:35:29 修改

阅读量1.6k

点赞数

分类专栏： easyui 文章标签： easyui

于 2022-04-08 16:34:04 首次发布

本文链接：https://blog.csdn.net/weixin_56996467/article/details/124044211

版权

easyui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：

这次的功能是基于上一次的项目做的，如果有不懂可以看上一节EasyUI(使用Oracle创建树形菜单)

一、创建数据库

create table t_book (
  id integer not null,
  bookname varchar(50) not null,
  price float not null,
  booktype varchar(40) not null,
  primary key (id)
);

-- 测试数据
insert  into t_book(id,bookname,price,booktype) values (1,'西游记00088',180,'名著');
insert  into t_book(id,bookname,price,booktype) values (2,'红楼梦001',110.08,'名著');
insert  into t_book(id,bookname,price,booktype) values (3,'倚天屠龙记',150.16,'武侠');
insert  into t_book(id,bookname,price,booktype) values (4,'聊斋志异',100.12,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(5,'永生',110.11,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(6,'武动乾坤',90.89,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(7,'完美世界',100,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(8,'万域之王',56.5,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(9,'遮天001',130.9,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(10,'凡人修仙传',200,'修仙');
insert  into t_book(id,bookname,price,booktype) values(11,'倚天屠龙记',150.16,'武侠');
insert  into t_book(id,bookname,price,booktype) values(12,'斗破苍穹',115.07,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(13,'超级兵王',145,'言情');
insert  into t_book(id,bookname,price,booktype) values(14,'武极天下',45.55,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(15,'聊斋志异',100.12,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(16,'永生',110.11,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(17,'武动乾坤',90.89,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(18,'完美世界',100,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(19,'万域之王',56.5,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(20,'Java',1000,'修仙');
insert  into t_book(id,bookname,price,booktype) values(21,'娃哈哈',100,'玄幻');
insert  into t_book(id,bookname,price,booktype) values(22,'呼啸山庄',123,'mz');
insert  into t_book(id,bookname,price,booktype) values(23,'平凡的世界',123,'mz');
insert  into t_book(id,bookname,price,booktype) values(24,'大红底',12,'xs');

二、创建包结构

三、更改主页结构

因为点击树形菜单需要跳到servlet执行，所以这里采用了Iframe框架，只需要更改js即可

onDblClick : function(node) {
    //判重，如果为false即可以添加新的tab
    if(!$("#tt").tabs('exists',node.text)){
    $('#tt').tabs('add', {
		title:node.text,
        //将内容更改为iframe框架，跳转到servlet处理
		content:'<iframe frameborder=0 src="' 
			+ node.url 
			+ '" scrolling="no" style="width:100%;height:100%;"></iframe>',    
		closable:true
	});
    //如果为true，证明已经存在，就移动到指定的tab
    }else{
    	$('#tt').tabs('select',node.text)
    }
}

四、页面搭建

1、首先是页面结构，本次项目写在bookList.jsp

HTML代码：

<%@ 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 file="../../common/head.jsp"%>
<script type="text/javascript">
	$(function(){
		$('#dg').datagrid({    
			//进servlet拿到数据
		    url:ctx+'/BookServlet',
		    toolbar: '#tb',
		    //显示底部分页工具栏
		    pagination:true,
		    columns:[[    
		    	//表格的结构，需要与实体类保持一致
		        {field:'id',title:'ID',width:100},    
		        {field:'bookname',title:'书本名称',width:100},    
		        {field:'price',title:'价格',width:100},
		        {field:'booktype',title:'类型',width:100} 
		    ]]    
		});
		//模糊查询
		$("#qrybtn").click(function(){
			qry();
		});
		
		function qry(){
			//使用重载的方法将查询的内容传递到servlet中
			$('#dg').datagrid("reload",{
				bookName:$("#bookName").val()
			});
		}
	})
</script>
</head>
<body>
<form action="" method="post" style="margin-top:20px">
	<div>   
        <label for="name">书名：</label>   
        <input id="bookName" class="easyui-textbox" style="width:300px"> 
        <a id="qrybtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
    </div>
    <div style="margin-top:20px" style="text-align:center">
	    <table id="dg"></table>
    </div>
    <div id="tb" style="text-align:right">
    	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"></a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"></a>
	</div>
</form> 
</body>
</html>

五、dao层开发

IBookDao就不贴代码了，就是两个对象方法

public class BookDao implements IBookDao {

	@Override
	public List<Book> getBooks(String name, int pageIndex, int pageSize) {
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		
		List<Book> list = new ArrayList<>();
		
		try {
			String sql = "select id,bookname,price,booktype,rownum as rid from t_book";
			if(name != null && !"".equals(name)) {
				sql += " where bookname like ?";
			}
			
			sql = "select * from (" + sql + ")b where b.rid between ? and ?";
			
			con = DBHelper.getsCon();
			ps = con.prepareStatement(sql);
			
			int start =(pageIndex-1)*pageSize+1;
			int end = pageIndex*pageSize;
			
			if(name != null && !"".equals(name)) {
				ps.setString(1, "%"+name+"%");
				ps.setInt(2, start);
				ps.setInt(3, end);
			} else {
				ps.setInt(1, start);
				ps.setInt(2, end);
			}
			
			rs = ps.executeQuery();
			
			while(rs.next()) {
				Book m = new Book();
				m.setId(rs.getInt("id"));
				m.setBookname(rs.getString("bookname"));
				m.setPrice(rs.getBigDecimal("price"));
				m.setBooktype(rs.getString("booktype"));
				list.add(m);
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.Close(con, ps, rs);
		}
		
		return list;
	}
	
	
	@Override
	public int getTotalPage() {
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		
		int n  = 0;
		try {
			con= DBHelper.getsCon();
			String sql = "select count(*) from  t_book";
			ps = con.prepareStatement(sql);
			rs= ps.executeQuery();
			if(rs.next()) {
				n = rs.getInt(1);
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.Close(con, ps, rs);
		}
		return n;
	}

}

六、Service层开发

public class BookService implements IBookService {
	
	private IBookDao dao = new BookDao();

	@Override
	public List<Book> getBooks(String name, int pageIndex, int pageSize) {
		
		return dao.getBooks(name, pageIndex, pageSize);
	}
	
	@Override
	public int getTotalPage() {
		return dao.getTotalPage();
	}

}

七、servlet开发

@WebServlet("/BookServlet")
public class BookServlet extends HttpServlet{
	
	private IBookService service = new BookService();
	
	@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("application/json; charset=utf-8");
			
			String name = req.getParameter("bookName");
			String pageIndex = req.getParameter("page");
			int pid = pageIndex == null || "".equals(pageIndex) ?  1 : Integer.parseInt(pageIndex);
			int pageSize = 10;
			
			List<Book> list = service.getBooks(name, pid, pageSize);
			int totalPage = service.getTotalPage();
			
			Map<String,Object> data = new HashMap<>();
			data.put("total", totalPage);
			data.put("rows", list);
			
			String json = JSON.toJSONString(data);
			
			PrintWriter out = resp.getWriter();
			out.write(json);
			out.flush();
			out.close();
	}
}

八、运行效果：

代码怎么敲啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
EasyUI(分页&模糊查询)

目录前言：一、创建数据库二、创建包结构三、更改主页结构四、页面搭建五、dao层开发六、Service层开发七、servlet开发前言：这次的功能是基于上一次的项目做的，如果有不懂可以看上一节EasyUI(使用Oracle创建树形菜单)一、创建数据库create table t_book ( id integer not null, bookname varchar(50) not null, price float not null,.
复制链接

扫一扫