使用Easyui进行分页和模糊查询

最新推荐文章于 2024-04-08 17:39:55 发布

weixin_苏红

最新推荐文章于 2024-04-08 17:39:55 发布

阅读量160

点赞数 1

CC 4.0 BY-SA版权

分类专栏： easyUI 文章标签： java

本文链接：https://blog.youkuaiyun.com/weixin_63944861/article/details/124133027

easyUI 专栏收录该内容

4 篇文章

订阅专栏

该博客介绍了如何使用Easyui进行分页和模糊查询的实现过程。首先讲解了iframe作为容器的作用，接着详细阐述了在iframe基础上搭建前端页面的方法。然后，逐步展示了从 Dao 层创建数据库、实体类和 dao 方法，到 Service 层的 BookService 和 ModuleService 开发，再到 Servlet 层的 BookListServlet 和 ModuleServlet 的代码实现，最后提到了前端页面的具体代码结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录
一、iframe

其实就是一个容器

二、前端页面搭建

在有iframe的基础下再去建立前端页面，借助中文文档

三、Dao层的开发

要想上述的数据实现，必须建立相关的数据库，实体类和dao方法等

bookdao方法代码如下

Moduledao方法代码如下

四、Service层的开发

BookService的代码如下

ModuleService的代码如下

五、Servlet层的开发

BookListServlet的代码如下

ModuleServlet的代码如下

六、前端页面

前端页面的代码如下

一、iframe
其实就是一个容器
用法如下：

$('#funcTab').tabs('add',{
    title: node.text,    
    content:'<iframe frameborder=0 src="node.url " scrolling="no" style="width:100%;height:100%;"></iframe>',    
    closable:true
});

二、前端页面搭建
在有iframe的基础下再去建立前端页面，借助中文文档
格式如下：

<%@ 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">
<%@ include file="/common/head.jsp" %>
<title>Insert title here</title>
<script>
$(function(){
    
    $('#bookTable').datagrid({    
        url: ctx+'/bookServlet', 
        pagination:true,
        singleSelect:true,
        queryParams: {
            "bookName": $("#bookName").val()
        },
        columns:[[    
            {field:'id',title:'书本ID',width:100},    
            {field:'bookname',title:'名称',width:100},    
            {field:'price',title:'价格',width:100,align:'right'},
            {field:'booktype',title:'类型',width:100,align:'right'}
        ]],
        toolbar: '#bookTableToolbar'
    });
    
    $("#bookQry").click(function() {
        qryBook();
    });
    
    qryBook();
 
    function qryBook() {
        $('#bookTable').datagrid("load", {
            "bookName": $("#bookName").val()
        })
    };
    
    
});
</script>
</head>
<body>
    <!-- 查询条件 -->
    <div style="margin-top: 15px; margin-left:10px;">
        <input class="easyui-textbox" id="bookName" style="width:300px">
        <a id="bookQry" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>  
    </div> 
    
    <div id="p" class="easyui-panel" style="padding:10px" data-options="fit:true, border:false">
        <table id="bookTable" class="easyui-datagrid" style="width:100%;height:90%;"> 
        </table>
    </div>
    
    <!-- 列表上方的工具条 -->
    <div id="bookTableToolbar" style="text-align: right;">
        <a href="#" id="addBookBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"/a>
        <a href="#" id="editBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
        <a href="#" id="delBootBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"/a>
    </div>
    
</body>
</html>

三、Dao层的开发

要想上述的数据实现，必须建立相关的数据库，实体类和dao方法等

bookdao方法代码如下

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.getString("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;
	}
	
	public static void main(String[] args) {
		BookDao dao = new BookDao();
		List<Book> books = dao.getBooks("璐�", 1, 5);
		
		books.forEach(t -> System.out.println(t));
	}
 
}

Moduledao方法代码如下：

public class ModuleDao implements IModuleDao {
 
	@Override
	public List<Module> listModel(int pid) {
		List<Module> list = new ArrayList<>();
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		try {
			String sql = "select id,pid,text,icon,url,sort from t_module where pid=? order by sort";
			con = DBHelper.getsCon();
			ps = con.prepareStatement(sql);
			ps.setInt(1, pid);
			rs = ps.executeQuery();
			
			while(rs.next()) {
				Module m = new Module();
				m.setId(rs.getInt("id"));
				m.setPid(rs.getInt("pid"));
				m.setText(rs.getString("text"));
				m.setUrl(rs.getString("url"));
				m.setSort(rs.getInt("sort"));
				list.add(m);
			}
			
		} catch (Exception e) {
			
		} finally {
			DBHelper.Close(con, ps, rs);
		}
		
		return list;
	}
	
	
	public static void main(String[] args) {
		ModuleDao dao = new ModuleDao();
		List<Module> list = dao.listModel(21);
		list.forEach(t->System.out.println(t));
	}
 
}

四、Service层的开发

BookService的代码如下：

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();
	}
 
}

ModuleService的代码如下：

public class ModuleService implements IModuleService {
	
	private IModuleDao dao = new ModuleDao();
 
	@Override
	public List<Module> listModel(int pid) {
		
		List<Module> list = dao.listModel(pid);
		
		for(Module m: list) {
			if(m.getUrl() == null || "".equals(m.getUrl().trim())) {
				m.setChildren(listModel(m.getId()));
			}
		}
		
		return list;
	}
	
	
	public static void main(String[] args) {
		IModuleService service = new ModuleService();
		List<Module> list = service.listModel(-1);
		list.forEach(t->System.out.println(t));
	}
 
}

五、Servlet层的开发

BookListServlet的代码如下：

@WebServlet("/bookServlet")
public class BookListServlet  extends HttpServlet {
	
	private IBookService service = new BookService();
	
	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		doPost(req, resp);
	}
	
	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws 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();
	}
 
}

ModuleServlet的代码如下：

@WebServlet("/moduleServlet")
public class ModuleServlet extends HttpServlet {
	
	private IModuleService service = new ModuleService();
	
	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		doPost(req, resp);
	}
	
	
	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		
		req.setCharacterEncoding("utf-8");
		resp.setContentType("application/json; charset=utf-8");
		
		
		List<Module> list = service.listModel(-1);
		
		PrintWriter out = resp.getWriter();
		String str = JSON.toJSONString(list);
		
		out.write(str);
		out.flush();
		out.close();
	}
 
}

六、前端页面

前端页面的代码如下：

<%@ 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">
	<%@ include file="common/head.jsp" %>
	<title>Insert title here</title>
	<script type="text/javascript">
	$(function(){
		$('#menuTree').tree({    
		    url:ctx + '/moduleServlet',
		    onDblClick:function(node) {
		    	
		    	let children = $('#menuTree').tree('getChildren',node.target);
		    	
		    	if(children <= 0) {
		    		
		    		if($('#funcTab').tabs('exists',node.text))
		    			return;
		    		
		    		$('#funcTab').tabs('add',{
			    	    title: node.text,    
			    	    content:'<iframe frameborder=0 src="' 
							+ node.url 
							+ '" scrolling="no" style="width:100%;height:100%;"></iframe>',    
			    	    closable:true
			    	}); 
		    	}
		    	
		    }
		}); 
	});
	</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:200px;">
	    <ul id="menuTree" class="easyui-tree"></ul>
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#eee;">
    
    <!-- - -->
    <div id="funcTab" class="easyui-tabs" style="width:100%;height:100%;">   
	    <div title="首页" style="padding:20px;display:none;">   
	        tab1    
	    </div>   
	</div>  
    <!--  -->
    
    </div>   
</body> 
</html>