EasyUI之DataGrid数据表格

具体实现接前篇博客，首先看官方文档

实现步骤

那么我们在自己的项目页面引入文档中的代码：

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

然后在指定页面的js文件中，引入：

$(function(){
	var ctx=$("#ctx").val();
	$('#dg').datagrid({    
    url:ctx+'/book.action?opt=datagrid',    
    pagination:true,
    toolbar:'#tb',
    columns:[[    
        {field:'id',title:'id',width:100},    
        {field:'name',title:'书籍名称',width:100},    
        {field:'pinyin',title:'单价',width:100},
        {field:'cid',title:'cid',width:100},  
        {field:'author',title:'作者',width:100},  
        {field:'image',title:'图片',width:300},
        {field:'publishing',title:'出版社',width:100}, 
        {field:'description',title:'描述',width:100},  
        {field:'state',title:'状态',width:100},  
        {field:'deployTime',title:'上架时间',width:100}, 
        {field:'sales',title:'售价',width:100,align:'right'}, 
    ]]    
});  
	$("#btn-search").click(function(){
		$("#dg").datagrid('load',{
			name: $("#name").val()
		});
	});
})

关键词说明：

url	获取数据的后台路径
pagination	EasyUI分页
toolbar	引用工具栏
columns	数据表格栏目
title	显示的别名

需要注意的是：
columns中的field 后对应的字段必须为数据库表中的字段
这里我用的是一张book表，表结构和数据如下：
然后在项目中建立对应的类：

action代码：

package com.xiaoyang.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.xiaoyang.dao.BookDao;
import com.xiaoyang.entity.Book;
import com.xiaoyang.framework.Action;
import com.xiaoyang.framework.ModelDriver;
import com.xiaoyang.util.DataGridResult;
import com.xiaoyang.util.PageBean;
import com.xiaoyang.util.ResponseUtil;

public class BookAction extends Action implements ModelDriver<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, pageBean);
		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,map);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return null;
	}
	
}

前台通过url跳转至action获取到数据源后，通过Json转译打印到前台显示数据，这里的格式一定要和文档中的要求一致，也就是键值对的方式，不然数据显示就会有问题…
具体格式参考官方json的demo:

{"total":28,"rows":[
	{"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
]}

针对于action的代码我们还可以优化一下，如下代码，如果我们的业务处理多了，这段代码就会重复写：

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

具体优化思路，可以把total和rows当成对象封装成属性，建立类和方法，进行返回：

package com.xiaoyang.util;

public class DataGridResult<T> {

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

那么我们的action就可以写成这样了：

			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 (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	

如果想要模糊查询，那么在前台定义文本框，给工具栏添加事件就行：

<div id="tb">
<input class="easyui-textbox" id="name" name="name" style="width: 20%;padding-left: 10px">
<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-add'"></a>
</div>

js文件：

$("#btn-search").click(function(){
		$("#dg").datagrid('load',{
			name: $("#name").val()
		});
	});

报错解决

Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax;

其实碰见这个问题也不是第一次了，很明显的sql代码问题，但是找了很久没发现，所以把所有sql代码都拎到数据库去试了一下，发现是空格问题：

public List<Book> list(Book book,PageBean pageBean){
		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, pageBean, Book.class);
	}

也就是dao方法中的sql拼接没空格，在sql+=后空格拼接就行

效果图

最后附上效果图：
模糊查询：