EasyUI之DataGrid 查询应用

前言：在上一篇文章中实现了读取数据库，从而达到 EasyUI tree组件数据支撑，现在我们来完善其他功能。

通过点击左侧菜单显示选项卡对应页面，在页面显示DataGrid(数据从数据库获取)

最终效果：

1DataGrid使用

1.1.创建实体类

package com.wyy.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
	}
}

1.2.编写查询方法

package com.wyy.dao;

import java.util.List;

import com.wyy.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> getAll(Book b,PageBean p) throws Exception{
		
		String sql="SELECT * FROM t_mvc_book where 1=1 ";
		String bname = b.getBname();
		if(StringUtils.isNotBlank(bname)) {
			sql+=" and bname like '%"+bname+"%'";
		}
		return super.executeQuery(sql, Book.class, p);
	}

}

1.3子控制器（BookAction）

参考EasyUI API文档； DataGrid表格要求参数为 total(数据总条数)、rows(数据对象)。

package com.wyy.Action;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.wyy.dao.BookDao;
import com.wyy.entity.Book;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.ResponseUtil;

public class BookAction extends ActionSupport implements ModelDriver<Book> {

	Book b=new Book();
	BookDao bo=new  BookDao();
	@Override
	public Book getModel() {
		// TODO Auto-generated method stub
		return b;
	}
	
	public String list(HttpServletRequest req, HttpServletResponse resp) throws Exception {
			PageBean p=new PageBean();
			//初始化
			p.setRequest(req);
			List<Book> all = bo.getAll(b, p);
			Map< String, Object> map=new HashMap<String, Object>();
			//根据EasyUI DataGrid属性设置键 
			map.put("total", p.getTotal());
			map.put("rows", all);
            //将map集合变成json串输出
			ResponseUtil.writeJSON(resp, map);
		return null;
	}
}

编写js

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

配置xml文件

<action path="/book" type="com.wyy.Action.BookAction"> </action> 

后台：读取数据，将数据转成JSON串，前台：Ajax请求访问   页面效果如下

页面效果单一，没有其他功能。

2分页以及模糊查询

尝试给页面添加模糊查询、分页 等效果。参考EasyUI API文档，给表格添加需要的属性

2.1完善js代码

$(function() {
	/*在easyui 点击上一页下一页分页参数 page/rows */
	$('#dg').datagrid({    
    url: $("#hh").val()+'/book.action?methodName=list',    
   /* 显示分页工具栏*/
    pagination :true,
    /*自动展开收缩列的大小,以适应网格的宽度*/
    fitColumns : true,
    /*绑定查询按钮*/
    toolbar:'#tb',
    /*表头*/
    columns:[[    
        {field:'bid',title:'代码',width:300},    
        {field:'bname',title:'名称',width:300},    
        {field:'price',title:'价格',width:300}    
    ]]    
});  
	/*模糊查询按钮点击事件*/
	$("#btn-search").click(function(){
		$("#dg").datagrid('load',{
            /*模糊查询key*/
			bname:$("#bname").val(),
			
		});
	});
})

   

 当在页面上点击上一页、下一页 时会携带page(当前页数)、rows(显示条数)这两个参数访问后台，PageBean 通过请求获取这两个参数，然后再带到查询语句中。

package com.wyy.util;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;

/**
 * 分页工具类
 *
 */
public class PageBean {

	private int page = 1;// 页数

	private int rows = 10;// 显示条数

	private int total = 0;// 总记录数

	private boolean pagination = true;// 是否分页
	
	private Map<String , String[]> map=new HashMap<String , String[]>();//保存上一次的所有参数
	private String url;//保存上一次的url
	
	/**
	 * 初始化pagebean 保存上一次的参数
	 * @param req
	 */
	public void setrequest(HttpServletRequest req) {
//			1.1需要保存上一次请求的URL
		this.setUrl(req.getRequestURL().toString());
//		   1.2需要保存上一次请求的参数
		this.setMap(req.getParameterMap());
//		 	1.3需要保存上一次请求的分页设置
		this.setPagination(req.getParameter("pagination"));
//		   1.4需要保存上一次请求的显示条数
		this.setRows(req.getParameter("rows"));
//		   1.5初始化请求页码
		this.setPage(req.getParameter("page"));
	}
	
	private void setPage(String page) {
		if(StringUtils.isNotBlank(page))
			this.setPage(Integer.valueOf(page));
		
	}

	private void setRows(String rows) {
		if(StringUtils.isNotBlank(rows))
			this.setRows(Integer.valueOf(rows));
	}

	private void setPagination(String parameter) {
		//只有在前台填写了parameter=false 才对吧不分页
		if(StringUtils.isNotBlank(parameter))
			this.setPagination(!"false".equals(parameter));
	}

	public Map<String, String[]> getMap() {
		return map;
	}

	public void setMap(Map<String, String[]> map) {
		this.map = map;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public PageBean() {
		super();
	}

	public int getPage() {
		return page;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public int getRows() {
		return rows;
	}

	public void setRows(int rows) {
		this.rows = rows;
	}

	public int getTotal() {
		return total;
	}

	public void setTotal(int total) {
		this.total = total;
	}

	public void setTotal(String total) {
		this.total = Integer.parseInt(total);
	}

	public boolean isPagination() {
		return pagination;
	}

	public void setPagination(boolean pagination) {
		this.pagination = pagination;
	}

	/**
	 * 获取起点下标
	 * 
	 * @return
	 */
	public int getStartIndex() {
		return (this.page - 1) * this.rows;
	}
	/**
	 * 最大页数
	 * @return
	 */
	public int maxpage() {
		return this.total % this.rows==0?this.total /this.rows :this.total /this.rows +1;
	}
	/**
	 * 下一页
	 * @return
	 */
	public int nexpage() {
		return this.page+1 < maxpage() ? this.page+1:maxpage();
	}
	public int prepage() {
		return this.page-1>0? this.page-1:this.page;
	}

	@Override
	public String toString() {
		return "PageBean [page=" + page + ", rows=" + rows + ", total=" + total + ", pagination=" + pagination
				+ ", map=" + map + ", url=" + url + "]";
	}

	

}

 DataGrid 数据页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/easyUI/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/easyUI/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/easyUI/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/easyUI/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyUI/js/book.js"></script>
<body>
	<!-- 绝对路径 -->
	<input type="hidden" value="${pageContext.request.contextPath}" id="hh">
	<!--  查询按钮 -->
	 <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> 
		<!-- DataGrid（数据表格）-->
	<table id="dg"></table>  
	

</body>
</html>

 在前台页面点击查询按钮时，携带page(当前页数)、rows(显示条数)、关键字（key）访问后台。返回 total(符合条件的总条数)、rows(符合条件的数据)

显示效果