EasyUI之DataGrid（数据表格）

DataGrid介绍

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

使用案例

实现创建DataGrid，有两种方式
第一种：在HTML中定义列

<table class="easyui-datagrid">   
    <thead>   
        <tr>   
            <th data-options="field:'code'">编码</th>   
            <th data-options="field:'name'">名称</th>   
            <th data-options="field:'price'">价格</th>   
        </tr>   
    </thead>   
    <tbody>   
        <tr>   
            <td>001</td><td>名称1</td><td>2323</td>   
        </tr>   
        <tr>   
            <td>002</td><td>名称2</td><td>4612</td>   
        </tr>   
    </tbody>   
</table>  

通过< table>标签创建DataGrid控件。在表格内使用< th>标签定义列

<table class="easyui-datagrid" style="width:400px;height:250px"   
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
    <thead>   
        <tr>   
            <th data-options="field:'code',width:100">编码</th>   
            <th data-options="field:'name',width:100">名称</th>   
            <th data-options="field:'price',width:100,align:'right'">价格</th>   
        </tr>   
    </thead>   
</table>  

第二种方式：
使用Javascript去创建DataGrid控件

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

$('#dg').datagrid({    
    url:'datagrid_data.json',    
    columns:[[    
        {field:'code',title:'代码',width:100},    
        {field:'name',title:'名称',width:100},    
        {field:'price',title:'价格',width:100,align:'right'}    
    ]]    
});  

我们来看一下DataGrid的属性、事件、方法

事件

方法

代码实现

需求：点击树形菜单显示tabs选项卡，在选项卡的基础上从数据库获取值展示数据
1、使用自定义mvc编码模式以datagrid组件表格的形式实现数据展示
2.、实体类（与数据中列字段必须保持一致）
数据库表结构

package com.liuchunming.entity;

import java.util.Date;

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 Date deployTime;
	private int sales;

3、dao方法继承basedao编写查询方法

package com.liuchunming.dao;

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

import com.liuchunming.entity.Book;
import com.liuchunming.util.BaseDao;
import com.liuchunming.util.PageBean;
import com.liuchunming.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.class, pageBean);
	}
}	

4、测试方法是否存在问题，编写mian方法测试

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

查询成功

5、编写web层实现类，继承ActionSupport类实现ModelDriven接口

package com.liuchunming.web;

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

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

import com.liuchunming.dao.BookDao;
import com.liuchunming.entity.Book;
import com.liuchunming.framework.ActionSupport;
import com.liuchunming.framework.ModelDriven;
import com.liuchunming.util.DateGridResult;
import com.liuchunming.util.PageBean;
import com.liuchunming.util.ResponseUtil;

public class BookAction extends ActionSupport implements ModelDriven<Book>{
	private Book book=new Book();
	private BookDao bookDao =new BookDao();
	
	@Override
	public Book getModel() {
		return book;
	}
	
	public String booklist(HttpServletRequest req,HttpServletResponse resp) {
//		total中的数据从哪来？--》pagebean total属性
//		rows的数据从哪来？--》每页的展示数据
		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 (InstantiationException e) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

}

通过url获取到数据转为json格式打印到前台显示，格式与官网文档要求一样
json官网格式

{"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"}
]}

根据需求如果需要实现业务多了，每一次都需要用到这段代码

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.liuchunming.util;

public class DateGridResult<T> {
	private String total;
	private T rows;
	
	public static DateGridResult SUCCESS =new DateGridResult<>();
	
	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 DateGridResult() {
		super();
	}
	private DateGridResult(String total, T rows) {
		super();
		this.total = total;
		this.rows = rows;
	}
	
	public static <T>  DateGridResult ok(String total,T rows){
		return new DateGridResult<>(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, DateGridResult.SUCCESS);
			ResponseUtil.writeJson(resp, DateGridResult.ok(pageBean.getTotal()+"", list));

Ribbon 界面

6、需求：想给index界面添加一个工具栏
6.1、查看官方文档，找到Ribbon界面
下载扩展

6.2、导入 Ribbon 文件
创建Ribbon文件需要导入 ‘ribbon.css’，‘ribbon-icon.css’ 和 ‘jquery.ribbon.js’ 文件。

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> 
<link rel="stylesheet" type="text/css" href="ribbon.css"> 
<link rel="stylesheet" type="text/css" href="ribbon-icon.css"> 
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"></script> 
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="jquery.ribbon.js"></script>

6.3、创建Ribbon
代码创建

<div class="easyui-ribbon" style="width:700px;"> 
<div title="Home"> 
<div class="ribbon-group"> 
<div class="ribbon-toolbar"> 
<a href="#" class="easyui-menubutton" data-options="name:'paste',iconCls:'icon-paste-large',iconAlign:'top',size:'large'">Paste</a> 
</div> 
<div class="ribbon-toolbar"> 
<a href="#" class="easyui-linkbutton" data-options="name:'cut',iconCls:'icon-cut',plain:true">Cut</a><br> 
<a href="#" class="easyui-linkbutton" data-options="name:'copy',iconCls:'icon-copy',plain:true">Copy</a><br> 
<a href="#" class="easyui-linkbutton" data-options="name:'format',iconCls:'icon-format',plain:true">Format</a> 
</div> 
<div class="ribbon-group-title">Clipboard</div> 
</div> 
<div class="ribbon-group-sep"></div> 
<div class="ribbon-group"> 
<div class="ribbon-toolbar" style="width:200px"></div> 
<div class="ribbon-group-title">other title</div> 
</div> 
<div class="ribbon-group-sep"></div> 
</div> 
</div>

通过 javascript 创建。

<div id="rr" style="width:700px;"></div> 
<script> 
$(function(){ 
$('#rr').ribbon({ 
data:data 
}); 
}); 
</script>

最后看效果图

总结

今天就到这里了如果有什么不对的地方欢迎大家在评论区留言交流改进！！