最近一段時間都在做人事系統的項目，主要用到了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應用（二）