jQuery EasyUI教程之datagrid应用（一）

最近一段时间都在做人事系统的项目，主要用到了EasyUI，数据库操作，然后抽点时间整理一下EasyUI的内容。

这里我们就以一个简洁的电话簿软件为基础，具体地说一下datagrid应用吧

datagrid就是一个表格，那我们怎么让数据库中的数据显示在其中呢?

第一步：各种配置这肯定不用说，你要想正常的应用一款软件就需要加载配置，这里我们不做详细说明 ；

第二步：配置加载完毕，我们就需要写方法调用数据库来获取数据了，

　　　　1.最底层的方法也就是Dao了 ,我们需要获取所有的联系人信息，

　　　　2.这里我们定义两个共用方法来初始化Hibernate和最后的释放资源

　　　　

public class PhoneDAO {

List<Deal> list = null ;
private SessionFactory sf = null ;
private Session se = null ;
private Transaction ts = null ;
Configuration cfg = null;
ServiceRegistry sr = null ;
//在测试用例方法被执行之前自动执行的方法
//一般用来初始化对象
public  PhoneDAO() {
//1获取配置文件
cfg = new Configuration().configure() ;

//2注册配置
sr = new StandardServiceRegistryBuilder().
applySettings(cfg.getProperties()).build();

}
public void init ()
{
try{

//3获取SessionFactory
sf = cfg.buildSessionFactory(sr) ;

}catch(Exception e)
{

//1获取配置文件
cfg = new Configuration().configure() ;

//2注册配置
sr = new StandardServiceRegistryBuilder().
applySettings(cfg.getProperties()).build();
//3获取SessionFactory
sf = cfg.buildSessionFactory(sr) ;

}

//4产生Session
se =sf.openSession() ;

//5启动事务
ts = se.beginTransaction() ;
}

//后置对象
//用来释放资源
public void destroy()
{
try
{
//7提交数据
ts.commit();
}catch(Exception e)
{
cfg = new Configuration().configure() ;

//2注册配置
sr = new StandardServiceRegistryBuilder().
applySettings(cfg.getProperties()).build();
//3获取SessionFactory
sf = cfg.buildSessionFactory(sr) ;
//4产生Session
se =sf.openSession() ;

//5启动事务
ts = se.beginTransaction() ;
ts.commit();
}
//8释放资源
se.close();
sf.close(); //关闭，释放资源
}
}

　　　　3.之后我们写入查询的方法

//查询联系人
public List<Phone> showAll()
{
init() ;
List<Phone> list = null ;

list = se.createQuery("from Phone").list() ;

destroy();

return list;
}

这里我们就获得了所有联系人列表

第三步：这里我们定义了一个json封装的泛型实体类，用来包装并返回json格式

package p_phone;

import java.util.ArrayList;
import java.util.List;

/**
* @author Administrator
*封装类
*通过泛型封装JSON的结果数据
*total 初始化为0
*rows为List集合的泛型
*/

/*
* 该类为封装JSON的结果数据集，
* 所以两个变量的名字要对应JSON的格式
* 并且为了简便省去拼接，我们定义row为List的集合
*/

public class PageJSON<T> {

private int total = 0 ;//定义total并初始化

private List<T> rows = new ArrayList<T>() ;//定义List集合的泛型

/*
* setting 、getting  方法
*/
public int getTotal() {
return total;
}

public void setTotal(int total) {
this.total = total;
}

public List<T> getRows() {
return rows;
}

public void setRows(List<T> rows) {
this.rows = rows;
}

}

　　下面的是实体类

package p_phone;
// Generated 2016-12-14 14:17:07 by Hibernate Tools 3.4.0.CR1

import java.util.Date;

/**
* Phone generated by hbm2java
*/
public class Phone implements java.io.Serializable {

private String PNumber;
private String PName;
private Date PBirthday;
private String PRemark;

public Phone() {
}

public Phone(String PNumber, String PName, Date PBirthday) {
this.PNumber = PNumber;
this.PName = PName;
this.PBirthday = PBirthday;
}

public Phone(String PNumber, String PName, Date PBirthday, String PRemark) {
this.PNumber = PNumber;
this.PName = PName;
this.PBirthday = PBirthday;
this.PRemark = PRemark;
}

public String getPNumber() {
return this.PNumber;
}

public void setPNumber(String PNumber) {
this.PNumber = PNumber;
}

public String getPName() {
return this.PName;
}

public void setPName(String PName) {
this.PName = PName;
}

public Date getPBirthday() {
return this.PBirthday;
}

public void setPBirthday(Date PBirthday) {
this.PBirthday = PBirthday;
}

public String getPRemark() {
return this.PRemark;
}

public void setPRemark(String PRemark) {
this.PRemark = PRemark;
}

}

之后在service层中我们写一个方法返回json类型的所有联系人列表

public String getPageJSON()
{
String rtn = "{\"total\":0,\"rows\":[ ]}";//定义变量并初始化JSON格式的结果集

PageJSON<Phone> pjson = new PageJSON<Phone>() ;//封装Rate类

List<Phone> list = new PhoneDAO().showAll() ;//定义List集合并赋值

String json_list = JSONArray.toJSONString(list) ; //将List集合转为JSON集合
System.out.println(json_list);
/*
* 通过set方法给实例化的对象赋值
*/
pjson.setRows(list);
pjson.setTotal(2);

rtn = JSONArray.toJSONString(pjson) ; //将对象JSON类型的数组

return rtn ; //返回JSON类型的结果集
}

第四步：到这里已经接近尾声了，我们再写一个Servlet，将数据传递到页面，重写doGet方法

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//转码
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");

String json_list = new PhoneService().getPageJSON() ;

response.getWriter().write(json_list) ;

}

第五步：也就是最后一步了，我们怎么让它显示到页面上呢？上面我们在Servlet中已经将获取到的json类型的所有联系人写到了网页上，之后我们在页面获取就好了

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>联系人</title>
<!-- 1    jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

<!-- 2    css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">

<!-- 3    图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">

<!-- 4    EasyUI的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<!-- 5    本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

</head>
<body>
<script type="text/javascript">
$(function(){

$("#dg").datagrid({
url:'SelectPhone' ,
idField:'pNumber',
columns:[[
{field:'pName',title:'姓名',width:100},
{field:'pNumber',title:'电话',width:100},
{field:'pBirthday',title:'生日',width:100,align:'right'},
{field:'pRemark',title:'备注',width:100,align:'right'}
]]
}) ;

})
</script>
<table id="dg"></table>
</body>
</html>

到这里就全部完成了，运行一下，看看效果



是不是将数据库的内容显示到网页上了，虽然样式不太好看，但是别着急我们一步一步慢慢来，

上面也说到了，样式不好看，那我们能不能改呢，当然能，datagrid为我们提供了方法，稍加修改，页面变成了下面的样子



修改下之前的代码：

columns:[[
{field:'pName',title:'姓名',width:100,align:'center'},
{field:'pNumber',title:'电话',width:100,align:'center'},
{field:'pBirthday',title:'生日',width:100,align:'right',align:'center'},
{field:'pRemark',title:'备注',width:100,align:'right',align:'center'}
]],
pagination:true,//分页
fitColumns:true,//列自适应宽度
rownumbers:true,//显示行号
striped:true,//斑马线
singleSelect:false,//是否单选

现在在页面上我们看到了分页，这是因为我们开启了分页功能，

想了解分页功能请点击链接 ：jQuery EasyUI教程之datagrid应用（二）