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应用（二）
