EasyUI之datagrid与查询

2023-10-19 15:21:28

目标：在上节课的基础上点击左边的树型菜单打开对应的的数据表格，并实现查询与分页功能（效果图如下）

一， datagrid

思路

1、给菜单添加点击事件，点击后跳转对应的界面
2、新建一个jsp文件夹，根据数据库创建一个uesemanage.jsp界面，和页面对应的book.js文件
3、到入MVC框架，写好对应的enetity、dao、web类
4、之后配置xml文件

根据数据库找到tree表的url数据，以人员信息维护为例建立uesemanage.jsp

ueseManage.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">
//导入js和css
<link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="${ pageContext.request.contextPath }/static/js/book.js"></script> 
<title>存放书籍</title>
</head>
<body>
//隐藏域（给book.jsp全路径名）
<input type="hidden" id="ctx" value="${ pageContext.request.contextPath }">
 
<div id="tb">
    <input class="easyui-textbox" id="bname" name="bname" style="width:20%;padding-left: 10px" data-options="label:'书名:',required:true">
    <a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
</div>
 
<table id="dg"></table>  
 
</body>
</html>

book实体类


package com.zking.entity;
 
public class Book {
 
	private int bid;
	private String bname;
	private float price;
 
	public int getBid() {
		return bid;
	}
 
	public void setBid(int bid) {
		this.bid = bid;
	}
 
	public String getBname() {
		return bname;
	}
 
	public void setBname(String bname) {
		this.bname = bname;
	}
 
	public float getPrice() {
		return price;
	}
 
	public void setPrice(float price) {
		this.price = price;
	}
 
	@Override
	public String toString() {
		return "Book [bid=" + bid + ", bname=" + bname + ", price=" + price + "]";
	}
 
	public Book(int bid, String bname, float price) {
		super();
		this.bid = bid;
		this.bname = bname;
		this.price = price;
	}
 
	public Book() {
		// TODO Auto-generated constructor stub
	}
 
}

BookDao

package com.zking.dao;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.entity.Book;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
 
public class BookDao extends BaseDao<Book>{
    //查询
	public List<Book> list(Book book,PageBean pageBean) throws Exception{
		String sql = " select * from t_mvc_book where 1=1 ";
		String bname = book.getBname();
		if(StringUtils.isNotBlank(bname)) {
			sql += " and bname like '%"+bname+"%'";
		}
		return super.executeQuery(sql, Book.class, pageBean);
	}
}

BookAction子控制器（参考EasyUI API文档； DataGrid表格要求参数为 total(数据总条数)、rows(数据对象)）

public class BookAction extends ActionSupport implements ModelDriver<Book> {
	private Book book = new Book();
	BookDao bd = new BookDao();
 
	public Book getModel() {
		return book;
	}
	public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		List<Book> list = bd.list(book, pageBean);
		ObjectMapper om = new ObjectMapper();
//		Map<String, Object> map = new HashMap<String, Object>();
//		map.put("total", pageBean.getTotal());
//		map.put("rows", list);
		ResponseUtil.writeJson(resp,new R().data("total", pageBean.getTotal()).data("rows", list));
		return null;
	}

子控制器中使用了链式编程，将以下代码进行封装，以达到简化代码的作用

修改前
Map<String, Object> map = new HashMap<String, Object>();
map.put(“total”, pageBean.getTotal());
map.put(“rows”, list);

工具类R（共同结果集写到一个方法里面）

package com.zking.util;
import java.util.HashMap;
public class R extends HashMap{
	public R data(String key,Object value) {
		this.put(key, value);
		return this;
	}
}

修改后
ResponseUtil.writeJson(resp,new R().data(“total”, pageBean.getTotal()).data(“rows”, list));

book.js（field属性要用实体类的属性，否则会报错）


$(function() {
$('#dg').datagrid({    
    url:$('#ctx').val()+'/book.action?methodName=datagrid',    
    pagination:true,
    toolbar:'#tb',
    columns:[[    
        {field:'bid',title:'id',width:100},    
        {field:'bname',title:'名称',width:100},    
        {field:'price',title:'价格',width:100,align:'right'}    
    ]]    
});

配置xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
	
	<action path="/menu" type="com.zking.web.MenuAction">
	</action>
	
	<action path="/book" type="com.zking.web.BookAction">
	</action>
	
</config>

结果展示：

二，分页以及查询

分页：参考EasyUI API文档，找到相应属性，加入js文件中即可

查询：ueseManage.jsp加入该代码

<div id="tb">
    <input class="easyui-textbox" id="bname" name="bname" style="width:20%;padding-left: 10px" data-options="label:'书名:',required:true">
    <a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
</div>

在js文件中与查询组件进行绑定（通过 id=“tb”）(在js文件中通过btn-search属性进行关键字查询)（book.js）

$(function() {
	/**
	 * 在easyUI中，点击下一页上一页等默认的分页效果，携带参数是page\rows
	 * bootstrap,点击下一页上一页等默认的分页效果，携带参数是page\offset
	 */
//	alert($('#ctx').val());
	console.log($('#ctx').val()+'/book.action?methodName=datagrid');
	$('#dg').datagrid({    
	    url:$('#ctx').val()+'/book.action?methodName=datagrid',    
	    pagination:true,
	    /*fitColumns:填充列  使用后width达到100%*/
	    fitColumns:true,
	    /*绑定查询按钮*/
	    toolbar: '#tb',
	    /*表头*/
	    columns:[[    
	        {field:'bid',title:'id',width:100},    
	        {field:'bname',title:'名称',width:100},    
	        {field:'price',title:'价格',width:100,align:'right'}    
	    ]]    
	}); 
 
	/*模糊查询按钮点击事件*/
	$("#btn-search").click(function(){
	   $('#dg').datagrid('load', {    
           /*模糊查询key*/
		   bname: $("#bname").val()  
	   });  
	});
	
})

最终结果：

到这里就结束了，有不对或补充的地方欢迎大家评论，谢谢！

码农公寓

一， datagrid

二，分页以及查询

相关文章