Dategrid数据表格--查询

一、前言

上次分享了tabs控件，今天分享Datagrid数据表格数据展示

二、实现

数据库表
提取码：wyso
先写实体类

package com.liubiao.entity;

import java.sql.Timestamp;

public class Book {
	
	private long id;
	private String name;
	private String pinyin;
	private long cid;
	private String author;
	private Float price;
	private String image;
	private String publishing;
	private String description;
	private int state;
	private Timestamp deployTime;
	private int sales;
	
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPinyin() {
		return pinyin;
	}
	public void setPinyin(String pinyin) {
		this.pinyin = pinyin;
	}
	public long getCid() {
		return cid;
	}
	public void setCid(long cid) {
		this.cid = cid;
	}
	public String getAuthor() {
		return author;
	}
	public void setAuthor(String author) {
		this.author = author;
	}
	public Float getPrice() {
		return price;
	}
	public void setPrice(Float price) {
		this.price = price;
	}
	public String getImage() {
		return image;
	}
	public void setImage(String image) {
		this.image = image;
	}
	public String getPublishing() {
		return publishing;
	}
	public void setPublishing(String publishing) {
		this.publishing = publishing;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	public int getState() {
		return state;
	}
	public void setState(int state) {
		this.state = state;
	}
	public Timestamp getDeployTime() {
		return deployTime;
	}
	public void setDeployTime(Timestamp deployTime) {
		this.deployTime = deployTime;
	}
	public int getSales() {
		return sales;
	}
	public void setSales(int sales) {
		this.sales = sales;
	}
	
	public Book(long id, String name, String pinyin, long cid, String author, Float price) {
		super();
		this.id = id;
		this.name = name;
		this.pinyin = pinyin;
	}
	
	@Override
	public String toString() {
		return "Book [id=" + id + ", name=" + name + ", pinyin=" + pinyin + ", cid=" + cid + ", author=" + author
				+ ", price=" + price + ", image=" + image + ", publishing=" + publishing + ", description="
				+ description + ", state=" + state + ", deployTime=" + deployTime + ", sales=" + sales + "]";
	}
	
	public Book(long id, String name, String pinyin, long cid, String author, Float price, String image,
			String publishing, String description, int state, Timestamp deployTime, int sales) {
		super();
		this.id = id;
		this.name = name;
		this.pinyin = pinyin;
		this.cid = cid;
		this.author = author;
		this.price = price;
		this.image = image;
		this.publishing = publishing;
		this.description = description;
		this.state = state;
		this.deployTime = deployTime;
		this.sales = sales;
	}
	
	public Book() {
		super();
	}
	
}

Dao方法

package com.liubiao.dao;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.liubiao.entity.Book;
import com.liubiao.entity.Permission;
import com.liubiao.util.BaseDao;
import com.liubiao.util.BuildTree;
import com.liubiao.util.PageBean;
import com.liubiao.util.StringUtils;
import com.liubiao.vo.TreeVo;

public class BookDao extends BaseDao<Book> {
	
	/**
	 * 是直接从数据库获取到的数据
	 * @param permission
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException+
	 */
	public List<Book> list(Book book,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String name = book.getName();
		String sql="select * from t_easyui_book where true ";
		if(StringUtils.isNotBlank(name)) {
			sql+=" and name like '%"+name+"%'";
		}
		return super.executeQuery(sql, Book.class, pageBean);
	}
	
}

今天的util包中新加了一个工具类（简化list集合转json格式时代码）

package com.liubiao.util;

public class DataGridResult<T> {
	
	private String total;
	private T rows;
	
	public String getTotal() {
		return total;
	}
	public void setTotal(String total) {
		this.total = total;
	}
	public T getRows() {
		return rows;
	}
	public void setRows(T rows) {
		this.rows = rows;
	}
	
	public DataGridResult(String total, T rows) {
		super();
		this.total = total;
		this.rows = rows;
	}
	
	public DataGridResult() {
		super();
	}
	
	public static <T> DataGridResult<T> ok(String total, T rows){
		return new DataGridResult<>(total,rows);
	}
	
}

处理数据的Action类

package com.liubiao.web;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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

import com.liubiao.dao.BookDao;
import com.liubiao.entity.Book;
import com.liubiao.framework.ActionSupport;
import com.liubiao.framework.ModelDriven;
import com.liubiao.util.DataGridResult;
import com.liubiao.util.PageBean;
import com.liubiao.util.ResponseUtil;

public class BookAction extends ActionSupport implements ModelDriven<Book> {
	
	private Book book = new Book();
	private BookDao bookDao = new BookDao();
	
	public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception{
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		List<Book> list = this.bookDao.list(book, pageBean);
		/*Map<String, Object> map = new HashMap<String, Object>();
		map.put("total", pageBean.getTotal());
		map.put("rows", list);
		ResponseUtil.writeJson(resp, map);*/
		ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal()+"",list));
		return null;
	}

	@Override
	public Book getModel() {
		// TODO Auto-generated method stub
		return book;
	}
	
}

加一个js文件与上次的index.js同级

$(function(){
	var ss = $("#ss").val();
	$('#dg').datagrid({    
	    url:ss+'/book.action?methodName=datagrid', 
	    pagination:true,
	    toolbar: '#tb',
	    columns:[[    
	        {field:'id',title:'id',width:100},
	        {field:'name',title:'书籍名称',width:100},
	        {field:'pinyin',title:'拼音',width:100,align:'right'}   ,
	        {field:'cid',title:'书籍类别',width:100},
	        {field:'author',title:'作者',width:100},
	        {field:'price',title:'价格',width:100},
	        {field:'publishing',title:'出版社',width:100},
	        {field:'deployTime',title:'上架时间',width:100} 
	    ]]
	});
	
//	点击搜索按钮完成按名字进行书籍查询
	$("#btn-search").click(function(){
		$('#dg').datagrid('load', {    
		    name: $("#name").val()
		}); 
	})
	
})

还要在mvc.xml文件中配置

<action path="/book" type="com.liubiao.web.BookAction" ></action>

展示数据的jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 全局样式 -->
<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>
<!-- 组件库源码的js文件 -->   
<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>
	
	<input type="hidden" id="ss" value="${pageContext.request.contextPath }" />
	<div id="tb">
		<input class="easyui-textbox" id="name" style="width:20;padding-left: 10px;" data-options="label:'书名：' " >
		<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
		<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>
	</div>
	
	<table id="dg" ></table> 
	
</body>
</html>

三、结果