EasyUi之DataGrid（数据表格）

简介

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

EasyUi学习文档光网链接：EasyUI Datagrid 数据网格

成品展示

DataGrid属性

事件

方法

案例

目标

这里有三种方式 这是前两种

我们要使用Javascript去创建DataGrid控件。

导入我们要的jar mvc.jar

在新增页面写上

在你的路径里面加上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"}
]}

在新增的js里面写上 要用$(function(){})包起来 还有要吧数据名字改了 要不获取不了

$('#dg').datagrid({    
    url:'datagrid_data1.json',    
    columns:[[    
        {field:'productid',title:'代码',width:100},    
        {field:'productname',title:'名称',width:100},    
        {field:'unitcost',title:'价格',width:100,align:'right'}    
    ]]    
});  

一个模板就弄好了

接下来我们要从数据库获取表的值t_easyui_book

写一个实体类 book 属性要和数据库的一样

package com.zhuchenxi.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;
	}
	@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(long id, String name, String pinyin) {
		super();
		this.id = id;
		this.name = name;
		this.pinyin = pinyin;
	}
	
	public Book() {
		// TODO Auto-generated constructor stub
	}
}

写上我们的bookdao继承basedao 因为我们还要写查询 所有我们还需要写个查询语句
并且测试一波

拿到数据 我们还可以测试下 模糊查询是否可用

模糊查询也没问题

写上我们的bookAction
写上main方法并且协商几条数据添加进去 测试 是否是我们需要的json格式

拿到数据后去json在线解析网去看看

这时候我们要注意需要知道两个问题

一个是total中的数据从哪来 还有rows的数据从哪来？图片里有答案

这里还有两个问题 怎么做到代码的优化 还有一个什么是硬编码

越优秀的代码越简洁

我们只需要写个助手类DataGridResult 带上泛型

package com.zhuchenxi.util;

public class DataGridResult {

	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  DataGridResult ok(String total,T rows){
		return new DataGridResult<>(total,rows);
	}
	
	
}

简化了三行代码 如果我们还要写其他的action 那么是不是还要写这三行代码 有了这个助手类只需要调用 就行了

//			Map map = new HashMap();
//			map.put("total", pageBean.getTotal());
//			map.put("rows", list);
//			硬编码
			ResponseUtil.writeJson(resp, DataGridResult.ok(pageBean.getTotal()+"", list));
//			ResponseUtil.writeJson(resp, DataGridResult.SUCCESS);
//			System.out.println(map);

这里给大家普及下硬解码的知识
转载至：硬编码与软编码

硬编码：就是将数据直接写入到代码中进行编译开发，比如在没有mybatits前，将sql语句写入到jdbc代码里，在比如纯jsp开发的过程中，将前端的html代码与java代码耦合，这都是应编码，如果要发生更改的问题，就需要更改源代码，如果是C/S开发，就直接一位这，客户端的软件需要重新下载安装，非常不合理。

软编码：则是将数据与源代码解耦，比如mybatis的配置文件，将sql于底层代码分离，就只对外暴露SQL语句供程序员编写。还比如使用mvc的设计模式，将纯jsp开发过程中的前端html代码和后端代码耦合的情况分离成view和controller模块，做到了解耦，也就实现了软编码，更加合理。

说简单点:硬编码就是什么都在你的程序代码里面写死了，你想稍微修改一下效果，都得修改你的代码。
再举个例子
我们写的 PermissionDao 里面 return 返回的 BuidTree.buiLdList里面的0我们知道是什么 但是在岗位上如果下一个接受的人 来看你的代码 他就不知道这个0到底代表什么 所有 这些是不能写死在里面
当然我们现在只是学习 有些东西要慢慢学来的

写好action后配置在mvc.mxl里面

接下来我们需要在js文件里面获取到我们的路径

pagination 就是我们的 是否分页 填上 true 就可以分页了 记得改数据库对应的名称 = =

效果图

最后一个查询功能 我们先看下文档

我们现在jsp里面写上查询栏和按钮

再写上

测试 没问题

今天的分享就到这啦