easyuiDatagrid(数据表格)

@TOC

Datagrid(数据表格)

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。
如下图：

案例

效果：

需求：
1、能够显示所有数据；
2、能够分页；
3、能够模糊查询。

实现过程思路

以t_easyui_book数据表为例

实体类:

package com.tanjie.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() {
		super();
	}
	
	public Book(long id, String name, String pinyin) {
		super();
		this.id = id;
		this.name = name;
		this.pinyin = pinyin;
	}
	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;
	}
	@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 + "]";
	}
}

dao层：查询所有方法

package com.tanjie.dao;

import java.sql.SQLException;
import java.util.List;

import com.tanjie.entity.Book;
import com.tanjie.util.BaseDao;
import com.tanjie.util.PageBean;
import com.tanjie.util.StringUtils;

public class BookDao extends BaseDao<Book>{
	
	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.getClass(), pageBean);
	}

	public static void main(String[] args) throws InstantiationException, IllegalAccessException, SQLException {
		BookDao bk=new BookDao();
		Book b=new Book();
		List<Book> list = bk.list(b, null);
		for (Book book : list) {
			System.out.println(book);
		}
	}
}

工具类：DatagridResult
记录总数、每页显示行数以及实例化的方法

package com.tanjie.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() {
		super();
	}
	public DatagridResult(String total, T rows) {
		super();
		this.total = total;
		this.rows = rows;
	}
	
	public static <T> DatagridResult<T> ok(String total,T rows){
		return new DatagridResult<>(total,rows);
	}
}

action:BookAction
处理业务逻辑

package com.tanjie.action;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Arrays;
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.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.liuchunming.framework.ActionSupport;
import com.liuchunming.framework.ModelDriven;
import com.tanjie.dao.BookDao;
import com.tanjie.entity.Book;
import com.tanjie.util.DatagridResult;
import com.tanjie.util.PageBean;
import com.tanjie.util.ResponseUtil;

public class BookAction extends ActionSupport implements ModelDriven<Book>{
	private Book book=new Book();
	private BookDao bookDao=new BookDao();
	
	@Override
	public Book getModel() {
		// TODO Auto-generated method stub
		return book;
	}
	
	public String datagrid(HttpServletRequest req,HttpServletResponse resp) {
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		try {
			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, DatagridResult.ok(pageBean.getTotal()+"", list));
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	
	public static void main(String[] args) throws JsonProcessingException {
		Map<String, Object> map=new HashMap<String, Object>();
		map.put("total", 28);
		List<Book> list = Arrays.asList(new Book(1, "ss", "ss"));
		map.put("rows", list);
		ObjectMapper om=new ObjectMapper();
		String str = om.writeValueAsString(map);
		System.out.println(str);
	}
}

js文件

$(function(){
	var ctx=$("#ctx").val();
	$('#dg').datagrid({    
	    url:ctx+'/book.action?methodName=datagrid',  
	    pagination:true,//是否分页
	    toolbar:'#tb',//工具栏
	    columns:[[    
	        {field:'id',title:'书籍id',width:150},    
	        {field:'name',title:'书籍名称',width:150},    
	        {field:'pinyin',title:'pinyin',width:150,align:'right'},  
	        {field:'cid',title:'cid',width:150},    
	        {field:'author',title:'书籍作者',width:150},    
	        {field:'price',title:'书籍价格',width:150},    
	        {field:'image',title:'书籍图片',width:150},    
	        {field:'publishing',title:'书籍描述',width:150},    
	        {field:'description',title:'书籍名称',width:150},    
	        {field:'state',title:'state',width:150},    
	        {field:'deployTime',title:'deployTime',width:150},  
	        {field:'sales',title:'sales',width:150}
	        ]]
	});  
	//点击搜索按钮完成按名字进行模糊查询
	$("#btn-search").click(function(){
		$('#dg').datagrid('load', {    
		    name: $("#name").val()
		});  
	})
})

jsp界面

<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">

<div id="tb"> 
书名
<input type="text" id="name">
<a href="#" id="btn-search" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">搜索</a>
<!-- <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">刪除</a>
 --></div>

<table id="dg"></table>  
</body>

运行结果如下：

模糊查询：

总结

希望能帮到大家，谢谢！！！