EasyUi之动态数据表格的实现

前言

       首先我们学习一款框架的方法应该是从阅读官方文档，结合案例理解及扩展来学习的，同理简介或者官方之类的话就不多说了，下面开始介绍如何使用和实现。

使用步骤

1.理解对应数据格式

我们去官网下载好的软件包中找到demo中对应的DataGrid的提供的json数据格式。

我们看到它有两个主要的键值对。

1. total总共行数
2. rows行数

其实也很简单理解，我们使用控件的数据源必须和下面这格式一样，要提供总记录数和行数据给它，控件自身会帮我们加载展示数据和提供分页功能。

2.使用控件

使用控件还是基于官方文档，在html中置入控件标签，在jquery中调用控件函数加载对应格式的数据源，当然具体使用还是得根据官方规范来。

1.引入控件标签

2.配置控件函数，url代表资源路径，columns设置的是对应列名标题和样式，注意列名不要错，不然显示不出来。

效果实现

可以分页这是组件为我们提供的。

这里的话主要的简单的使用和理解，数据是死的静态的等会我们来进行把数据从数据库展示出来。

对应文件路径：

展示效果：

代码实现

1.思路

我们要配合mvc框架来实现，这里博主之前文章有写，相信上面已经讲的比较清楚了，想要把数据库的数据展示出来的话，我们要在组件函数中配置url资源加载路径、需要显示的列，然后通过后台代码，利用map键值对形式把总记录数和行数据进行存储然后利用json架包，把map转成json的对应数据格式输出到浏览器中。

这就是我们的数据库的数据，目的就是把它显示到前端，我们要建立对应的实体类

2.后台数据格式的转变

这是简单的定义死数据的转变过程，等一下会实现活数据的演变。

public static void main(String[] args) throws JsonProcessingException {
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("total", 28);
		List<Book> asList = Arrays.asList(new Book(1,"x1","x1"),new Book(2,"x2","x2"),new Book(3,"x3","x3"));
		map.put("rows", asList);
		
		ObjectMapper om  = new ObjectMapper();
		String jsonstr = om.writeValueAsString(map);
		System.out.println(jsonstr);
	}

我们打印出来并实现json格式看一下，明显可以看出来正好符合数据表格需要的规范。

{
	"total": 28,
	"rows": [{
		"id": 1,
		"name": "x1",
		"pinyin": "x1",
		"cid": 0,
		"author": null,
		"price": 0.0,
		"image": null,
		"publishing": null,
		"description": null,
		"state": 0,
		"deployTime": null,
		"sales": 0
	}, {
		"id": 2,
		"name": "x2",
		"pinyin": "x2",
		"cid": 0,
		"author": null,
		"price": 0.0,
		"image": null,
		"publishing": null,
		"description": null,
		"state": 0,
		"deployTime": null,
		"sales": 0
	}, {
		"id": 3,
		"name": "x3",
		"pinyin": "x3",
		"cid": 0,
		"author": null,
		"price": 0.0,
		"image": null,
		"publishing": null,
		"description": null,
		"state": 0,
		"deployTime": null,
		"sales": 0
	}]
}

3.控件函数配置

配置页面加载时的资源和需要展示的列。

$(function(){
	var src = $("#ctx").val();
	$('#dg').datagrid({   
	    url:src+'/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},  
	        {field:'cid',title:'副id',width:100},  
	        {field:'author',title:'作者',width:100},  
	        {field:'price',title:'价格',width:100}, 
	        {field:'image',title:'路径',width:100}, 
	        {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-serch").click(function(){
//		alert(1);
		$('#dg').datagrid('load', {    
		    name: $("#name").val() 
		});  
	})	
})

4.具体实现

因为这是用mvc框架实现所以业务类只需要写一个方法获取到dao层的数据转为map形式通过json工具类转一下格式输出到浏览器中就好了。

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,map);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

5.代码优化

以上代码看起来是没有上面问题，其实仔细想想存在的题是非常大的，可以这样说吧， 想要实现数据展示这5行代码必不可少，细想一下如果有很多这样的类呢？那是不是很不好，有时候能将100行代码的功能用十行代码写出来那就是代码的优化。

DataGridResult工具类

这是用来优化数据表格的结果集格式的。

两个重要属性：

1.total总记录数

2.rows行数据，这里因为是泛型支持如何结果集

声明了私有的构造器主要是为了良好的规范性和维护性。

package com.liyingdong.util;

public class DataGridResult<T> {

	private String total;
	private T rows;
	private int code;
	private String msg;
	
	public static DataGridResult SUCCESS = new DataGridResult<>(/*200,操作成功*/);
	public static DataGridResult failtrue = new DataGridResult<>(/*400,操作失败*/);
	
	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;
	}
	private DataGridResult(String total, T rows) {
		super();
		this.total = total;
		this.rows = rows;
	}
	
	private DataGridResult() {
		// TODO Auto-generated constructor stub
	}
	
	public static <T> DataGridResult ok(String total,T rows){
		return new DataGridResult<>(total,rows);
	}
	
	
}

优化后：

可以看到我们只用了一行代码就实现了。

package com.liyingdong.web;

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

public class BookAction extends ActionSupport 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);
		try {
			ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal()+"", this.bookdao.list(book, pageBean)));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
}

实现效果

主界面

分页效果

模糊查询