Web前端基礎插件複習
----------------------------------
Easy UI的Tree插件和DataGrid插件實戰
一、 Easy UI的Tree（樹狀圖）插件
1. 基本使用步驟：
前端：
1) 在頁面引入easyui.css和icon.css樣式文件，引入jQuery基礎腳本庫和jquery.easyui.min.js擴展函數庫；
2) 在頁面定義用來放置Tree組件的區域
3) 在JSP頁面編寫Tree插件的自定義腳本
後臺：
4) 編寫TreeNode實體類，用於封裝並承載Tree組件的數據實體
5) 編寫業務邏輯類和其他DAO類及其方法，用於生成JSONObject或JSONArray類型的數據
6) 編寫Action類，在其中聲明並封裝JSONObject類型或JSONArray類型的屬性，用於接收結果並返回至客戶端
7) 配置struts.xml配置文件，注意package繼承json-default包，且結果類型爲json，使param元素的root屬性指定要序列化的根對象。
2. 代碼示例：
JSP頁面：
<%@page language="java" import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Easy UI的Tree控件</title>
<!-- 引入Easy UI的基本CSS樣式 -->
<link rel="stylesheet"href="easyUI/themes/default/easyui.css"type="text/css"></link>
<link rel="stylesheet"href="easyUI/themes/icon.css"type="text/css"></link>
<!-- 引入jQuery基礎腳本庫 -->
<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>
<!--引入Easy UI的擴充函數庫 -->
<scripttype="text/javascript"src="js/jquery.easyui.min.js"></script>
<!--自定義腳本 -->
<scripttype="text/javascript">
$(function() {
$('#tree').tree({
//設置url爲在struts.xml文件中配置的action的訪問路徑
url:'getJsonData.action',
//開啓動畫效果
animate:true,
//每個節點都要顯示覆選框
checkbox:true,
//關閉級聯選中
cascadeCheck:false,
//只在葉節點上才顯示覆選框
onlyLeafCheck:true,
//開啓拖拽功能
dnd:true,
//鼠標雙擊事件
onDbClick:function(node){
//改變當前節點的摺疊/展開狀態
$(this).tree("toggle",node.target);
}
});
});
</script>
</head>
<body>
<!--Easy UI的樹狀圖在給定DOM區域時要設定爲<ul></ul>標籤 -->
<ul id="tree"></ul>
</body>
</html>TreeNode實體類：
packagecom.tree.entity;
importjava.util.Set;
/**
* Tree組件封裝的實體類
*
* 項目名稱：ReviewOfjQueryUITree類名稱：TreeNode 類描述：創建人：SteveJrong 創建時間：2015-11-8
* 下午1:49:48 修改人：SteveJrong修改時間：2015-11-8 下午1:49:48 修改備註：
*
* @version 1.0 Alpha
*
*/
publicclass TreeNode {
/**
* 節點編號屬性
*/
private Integer id;
/**
* 節點文本屬性
*/
private String text;
/**
* 節點的子節點集合屬性
*/
private Set<TreeNode> children;
/**
* 節點的展開/閉合狀態屬性
*/
private String state;
/**
* 節點的圖標屬性
*/
private String iconCls;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public Set<TreeNode>getChildren() {
return children;
}
public voidsetChildren(Set<TreeNode> children) {
this.children = children;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getIconCls() {
return iconCls;
}
public void setIconCls(String iconCls){
this.iconCls = iconCls;
}
/**
* 帶三個參數的構造方法
*
* @param id
* 節點的編號
* @param text
* 節點的文本
* @param children
* 節點下的子節點
*/
public TreeNode(Integer id, Stringtext, Set<TreeNode> children) {
super();
this.id = id;
this.text = text;
this.children = children;
}
/**
* 帶兩個參數的構造方法
*
* @param id
* 節點的編號
* @param text
* 節點的文本
*/
public TreeNode(Integer id, Stringtext) {
super();
this.id = id;
this.text = text;
}
/**
* 帶三個參數的構造方法
*
* @param id
* 節點的編號
* @param text
* 節點的文本
* @param iconCls
* 節點的圖標
*/
public TreeNode(Integer id, Stringtext, String iconCls) {
super();
this.id = id;
this.text = text;
this.iconCls = iconCls;
}
/**
* 帶四個參數的構造方法
*
* @param id
* 節點的編號
* @param text
* 節點的文本
* @param children
* 節點下的子節點
* @param state
* 節點的開閉狀態
*/
public TreeNode(Integer id, Stringtext, Set<TreeNode> children,
String state) {
super();
this.id = id;
this.text = text;
this.children = children;
this.state = state;
}
}Service業務類：
packagecom.tree.service;
importjava.util.HashSet;
importjava.util.Set;
importnet.sf.json.JSONArray;
importcom.tree.entity.TreeNode;
/**
* 樹狀圖的業務類
*
* 項目名稱：ReviewOfjQueryUITree類名稱：TreeDaoImpl 類描述：創建人：SteveJrong 創建時間：2015-11-8
* 下午1:47:32 修改人：SteveJrong修改時間：2015-11-8 下午1:47:32 修改備註：
*
* @version 1.0 Alpha
*
*/
publicclass TreeService {
/**
* 獲取JSON類型數據的方法【業務邏輯】
*
* @return
*/
public JSONArray getJSONResultData() {
// “售後服務”下的子節點
Set<TreeNode>childNodeUnderAfterSalesService = new HashSet<TreeNode>();
childNodeUnderAfterSalesService.add(newTreeNode(211, "售後服務起止日期查詢",
"icon-search"));
childNodeUnderAfterSalesService.add(newTreeNode(212, "產品延保",
"icon-search"));
// “電子產品”下的子節點
Set<TreeNode>childNodeUnderElectronicProduct = new HashSet<TreeNode>();
childNodeUnderElectronicProduct.add(newTreeNode(111, "智能手機",
"icon-search"));
childNodeUnderElectronicProduct.add(newTreeNode(112, "平板電腦",
"icon-search"));
childNodeUnderElectronicProduct.add(newTreeNode(113, "二合一筆記本平板",
"icon-search"));
// 根節點下的子節點（共有兩個子節點，分別是"電子產品"和"售後服務"）
Set<TreeNode>childNodeUnderRoot = new HashSet<TreeNode>();
childNodeUnderRoot.add(newTreeNode(101, "電子產品",
childNodeUnderElectronicProduct));
childNodeUnderRoot.add(newTreeNode(201, "售後服務",
childNodeUnderAfterSalesService,"closed"));
// 根節點
Set<TreeNode> root =new HashSet<TreeNode>();
root.add(new TreeNode(1,"所有產品", childNodeUnderRoot));
returnJSONArray.fromObject(root);
}
}Action類：
packagecom.tree.action;
importnet.sf.json.JSONArray;
importcom.opensymphony.xwork2.ActionSupport;
import com.tree.service.TreeService;
importcom.tree.util.EnumResultType;
/**
* Easy UI的Tree控件相關的Action
*
* 項目名稱：ReviewOfjQueryUITree類名稱：TreeAction 類描述：創建人：SteveJrong 創建時間：2015-11-8
* 下午1:40:48 修改人：SteveJrong修改時間：2015-11-8 下午1:40:48 修改備註：
*
* @version 1.0 Alpha
*
*/
publicclass TreeAction extends ActionSupport {
/**
*
*/
private static final longserialVersionUID = -240813651995807009L;
/**
* 定義JSONArray類型的屬性用於獲取JSON結果 本示例中使用的是Set集合，所以要用JSONArray類型；
* 若是使用了像Map集合這樣的鍵值對集合類型的話就需要定義JSONObject類型
*/
private JSONArray jsonDatas;
public JSONArray getJsonDatas() {
return jsonDatas;
}
public void setJsonDatas(JSONArrayjsonDatas) {
this.jsonDatas = jsonDatas;
}
/**
* 默認的執行方法
*/
@Override
public String execute() throws Exception{
jsonDatas = newTreeService().getJSONResultData();
returnEnumResultType.SUCCESS.getTrueResultType();
}
}其他工具類：
枚舉類，用於Action結果類型的枚舉：
packagecom.tree.util;
publicenum EnumResultType {
SUCCESS("SUCCESS"),FAILED("FAILED"), INPUT("INPUT");
/**
* 定義屬性用於獲取真實的枚舉類型的值
*/
private String trueResultType;
public String getTrueResultType() {
return trueResultType;
}
// 創建一個帶參的構造函數用於傳入枚舉
private EnumResultType(String type) {
this.trueResultType = type;
}
}struts.xml配置文件：
<?xmlversion="1.0" encoding="UTF-8" ?>
<!DOCTYPEstruts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<packagename="josn_default" namespace="/" extends="json-default">
<actionname="getJsonData" class="com.tree.action.TreeAction">
<resultname="SUCCESS" type="json">
<paramname="root">jsonDatas</param>
<paramname="excludeNullProperties">true</param>
</result>
</action>
</package>
</struts> 總體項目結構：
運行效果：
二、
EasyUI的DataGrid（數據表）插件
1. 基本使用步驟：
前端：
1) 在頁面引入easyui.css和icon.css樣式文件，引入jQuery基礎腳本庫和jquery.easyui.min.js擴展函數庫；
2) 在頁面定義用來放置DataGrid組件的區域
3) 在JSP頁面編寫DataGrid插件的自定義腳本
後臺：
4) 編寫DataGridNode實體類，用於封裝並承載DataGrid組件的數據實體
5) 編寫業務邏輯類和其他DAO類及其方法，用於生成JSONObject或JSONArray類型的數據
6) 編寫Action類，在其中聲明並封裝JSONObject類型或JSONArray類型的屬性，用於接收結果並返回至客戶端；定義Integer類型的rows（每頁顯示記錄的條數）和page（當前頁數）變量（名字不能變，是DataGrid插件封裝好的字段），用於分頁；
7) 配置struts.xml配置文件，注意package繼承json-default包，且結果類型爲json，使param元素的root屬性指定要序列化的根對象。
2. 代碼示例：
數據來源爲集合的示例（不與數據庫連接）：
JSP頁面：
<%@page language="java" import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Easy UI的DataGrid插件 - 無數據庫交互</title>
<!-- 導入Easy UI默認的CSS樣式和圖標樣式-->
<link rel="stylesheet"href="easyUI/themes/default/easyui.css"type="text/css"></link>
<link rel="stylesheet"href="easyUI/themes/icon.css"type="text/css"></link>
<!-- 導入jQuery基礎腳本庫 -->
<script type="text/javascript"src="js/jquery-1.8.3.js"></script>
<!-- 導入Easy UI的擴展函數庫 -->
<scripttype="text/javascript"src="js/jquery.easyui.min.js"></script>
<!-- 自定義腳本 -->
<scripttype="text/javascript">
$(function() {
$("#dg").datagrid({
url :'getDataGridData.action',
singleSelect : true,
iconCls :'icon-search',
rowNumbers : true,
pagination : true,
pageSize : 3,
pageList : [ 3, 6, 9],
fitColumns : true,
striped : true,
columns : [ [ {
field :'ck',
checkbox :true
}, {
field :'empId',
title : '員工編號',
width :100,
sortable:true
}, {
field :'empName',
title : '員工姓名',
width : 100
}, {
field :'empJob',
title : '職位',
width : 100
}, {
field :'empHireDate',
title : '入職日期',
width : 100
}, {
field :'empOfDeptName',
title : '部門名稱',
width : 100
} ] ],
loadMsg : "正在努力加載中，請稍候………………"
});
});
</script>
</head>
<body>
<!--Easy UI的DataGrid插件使用<table></table>標籤來作爲內容存放的區域 -->
<table id="dg" title="投票列表"></table>
</body>
</html>DataGridNode實體類：
packagecom.datagrid.entity;
/**
* DataGrid封裝的實體類
*
* 項目名稱：ReviewOfEasyUIDataGrid類名稱：DataGridNode 類描述：創建人：SteveJrong
* 創建時間：2015-11-8 下午4:04:42 修改人：SteveJrong修改時間：2015-11-8 下午4:04:42 修改備註：
*
* @version 1.0 Alpha
*
*/
publicclass DataGridNode {
/**
* 員工編號屬性
*/
private Integer empId;
/**
* 員工姓名屬性
*/
private String empName;
/**
* 員工職位屬性
*/
private String empJob;
/**
* 員工入職日期屬性
*/
private String empHireDate;
/**
* 員工所屬部門名稱屬性
*/
private String empOfDeptName;
public Integer getEmpId() {
return empId;
}
public void setEmpId(Integer empId) {
this.empId = empId;
}
public String getEmpName() {
return empName;
}
public void setEmpName(String empName){
this.empName = empName;
}
public String getEmpJob() {
return empJob;
}
public void setEmpJob(String empJob) {
this.empJob = empJob;
}
public String getEmpHireDate() {
return empHireDate;
}
public void setEmpHireDate(StringempHireDate) {
this.empHireDate =empHireDate;
}
public String getEmpOfDeptName() {
return empOfDeptName;
}
public void setEmpOfDeptName(StringempOfDeptName) {
this.empOfDeptName =empOfDeptName;
}
/**
* 帶五個參數的構造函數
*
* @param empId
* 員工編號
* @param empName
* 員工姓名
* @param empJob
* 員工職位
* @param empHireDate
* 員工入職日期
* @param empOfDeptName
* 員工所屬部門名稱
*/
public DataGridNode(Integer empId,String empName, String empJob,
String empHireDate,String empOfDeptName) {
super();
this.empId = empId;
this.empName = empName;
this.empJob = empJob;
this.empHireDate =empHireDate;
this.empOfDeptName =empOfDeptName;
}
}DataGridService業務類：
packagecom.datagrid.service;
importjava.util.ArrayList;
importjava.util.HashMap;
importjava.util.HashSet;
importjava.util.List;
importjava.util.Map;
importjava.util.Set;
importnet.sf.json.JSONObject;
importcom.datagrid.entity.DataGridNode;
/**
* Easy UI的DataGird業務類
*
* 項目名稱：ReviewOfEasyUIDataGrid類名稱：DataGridService 類描述：創建人：SteveJrong
* 創建時間：2015-11-8 下午3:51:50 修改人：SteveJrong修改時間：2015-11-8 下午3:51:50 修改備註：
*
* @version 1.0 Alpha
*
*/
publicclass DataGridService {
/**
* 獲取DataGird數據的方法【業務邏輯】
*
* @param rows
* 每頁顯示的數據條數
* @param page
* 當前頁數
* @return
*/
public JSONObjectgetDataGridDatas(Integer rows, Integer page) {
// 創建一個DataGridNode類型的集合，用於模擬保存數據庫中的數據
List<DataGridNode>gridNodes = new ArrayList<DataGridNode>();
gridNodes.add(newDataGridNode(1, "張三", "銷售員", "2015-1-1", "銷售部"));
gridNodes.add(newDataGridNode(2, "李四", "銷售員", "2015-3-17", "銷售部"));
gridNodes.add(newDataGridNode(3, "王五", "銷售員", "2015-7-26", "研發部"));
gridNodes.add(newDataGridNode(4, "趙六", "銷售員", "2015-8-23", "市場部"));
gridNodes.add(newDataGridNode(5, "小花", "銷售員", "2015-8-14", "市場部"));
gridNodes.add(newDataGridNode(6, "小A", "銷售員", "2015-1-1", "銷售部"));
gridNodes.add(newDataGridNode(7, "小B", "銷售員", "2015-3-17", "銷售部"));
gridNodes.add(newDataGridNode(8, "小C", "銷售員", "2015-7-26", "研發部"));
gridNodes.add(newDataGridNode(9, "小D", "銷售員", "2015-8-23", "市場部"));
gridNodes.add(newDataGridNode(10, "小E", "銷售員", "2015-8-14", "市場部"));
// 分頁時要從集合的哪一條索引的數據開始查詢
Integer startIndex = (page -1) * rows;
// 分頁時要到集合的哪一條索引的數據結束查詢
Integer endIndex = 0;
// 這裏因爲是集合，所以需要對查詢的結束索引進行邏輯判斷
/*
* 如果 開始查詢的索引+當前頁顯示的條數之和比當前總數據條數還多，那麼就重新規定一下結束位置的索引，避免因數組中沒有數據而發生異常
*/
if (startIndex + rows >gridNodes.size()) {
//【主要針對的是最後一頁的顯示】用總數據條數-當前頁顯示的數據條數求出最後一頁還要顯示多少條數據，最後再加上原來每頁要顯示的數據條數即可計算出最後一頁的數據條數了
endIndex =(gridNodes.size() - rows) + rows;
} else {
/*
* 如果 開始查詢的索引+當前頁顯示的條數之和比當前總數據條數少，那麼說明集合中的全部數據還不足以在訪問他們時拋出異常，
* 就以正常方式計算求出結束位置的索引
*/
endIndex =startIndex + rows;
}
// endIndex = startIndex +rows;
// 創建一個新的Set集合用來存放通過rows和page兩個參數篩選過的新集合（分頁要顯示的部分數據的集合）
Set<DataGridNode>newSplitPage = new HashSet<DataGridNode>();
// 循環方式爲從某一條數據的索引開始，到某一條數據的索引結束，篩選這一段索引範圍內的數據，用於分頁顯示當前頁的數據
for (int i = startIndex; i< endIndex; i++) {
newSplitPage.add(gridNodes.get(i));
}
// 創建JSON的根對象，通過JSONObject間接的轉換爲符合EasyUI的DataGrid插件標準的JSON數據
Map<String, Object> map= new HashMap<String, Object>();
map.put("total",gridNodes.size());
map.put("rows",newSplitPage);
returnJSONObject.fromObject(map);
}
}Action類：
packagecom.datagrid.action;
importjava.io.Serializable;
importnet.sf.json.JSONObject;
importcom.datagrid.service.DataGridService;
importcom.datagrid.util.EnumResultType;
importcom.opensymphony.xwork2.ActionSupport;
/**
* Easy UI的DataGrid相關的Action
*
* 項目名稱：ReviewOfEasyUIDataGrid類名稱：DataGridAction 類描述：創建人：SteveJrong
* 創建時間：2015-11-8 下午5:20:49 修改人：SteveJrong修改時間：2015-11-8 下午5:20:49 修改備註：
*
* @version 1.0 Alpha
*
*/
publicclass DataGridAction extends ActionSupport implements Serializable {
/**
*
*/
private static final longserialVersionUID = 329645127608191489L;
/**
* 每頁要顯示數據的條數屬性
*/
private Integer rows;
/**
* 當前頁數屬性
*/
private Integer page;
/**
* 定義JSONObject類型的屬性，用於接收結果
*/
private JSONObject jsonDatas;
public Integer getRows() {
return rows;
}
public void setRows(Integer rows) {
this.rows = rows;
}
public Integer getPage() {
return page;
}
public void setPage(Integer page) {
this.page = page;
}
public JSONObject getJsonDatas() {
return jsonDatas;
}
public void setJsonDatas(JSONObjectjsonDatas) {
this.jsonDatas = jsonDatas;
}
/**
* 默認的執行方法
*/
@Override
public String execute() throwsException {
jsonDatas = newDataGridService().getDataGridDatas(rows, page);
returnEnumResultType.SUCCESS.getTrueType();
}
}其他工具類：
枚舉類，用於Action結果類型的枚舉：
packagecom.datagrid.util;
/**
* Action枚舉的結果類型
*
* 項目名稱：ReviewOfEasyUIDataGrid類名稱：EnumResultType 類描述：創建人：SteveJrong
* 創建時間：2015-11-8 下午5:17:29 修改人：SteveJrong修改時間：2015-11-8 下午5:17:29 修改備註：
*
* @version 1.0 Alpha
*
*/
publicenum EnumResultType {
// 定義枚舉類型
SUCCESS("SUCCESS"),FAILED("FAILED"), INPUT("INPUT");
// 枚舉類型的真實類型的屬性，用於獲取某一枚舉類型真實的數據類型
private String trueType;
// 封裝getter方法獲取真實的數據類型
public String getTrueType() {
return trueType;
}
// 創建一個私有構造函數將要獲取的枚舉類型傳入，並找到此枚舉類型的真實數據類型
private EnumResultType(String type) {
this.trueType = type;
}
}struts.xml配置文件：
<?xmlversion="1.0" encoding="UTF-8" ?>
<!DOCTYPEstruts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<packagename="json_default" namespace="/" extends="json-default">
<actionname="getDataGridData"class="com.datagrid.action.DataGridAction">
<resultname="SUCCESS" type="json">
<paramname="root">jsonDatas</param>
<paramname="excludeNullProperties">true</param>
</result>
</action>
</package>
</struts>總體項目結構：
運行效果：
數據來源爲數據庫的示例（與數據庫進行連接）：
JSP頁面：
<%@ pagelanguage="java" import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Easy UI的DataGrid組件</title>
<!-- 導入Easy UI默認的CSS樣式和圖標樣式 -->
<link rel="stylesheet"href="easyUI/themes/default/easyui.css"type="text/css"></link>
<link rel="stylesheet"href="easyUI/themes/icon.css"type="text/css"></link>
<!-- 導入jQuery基礎腳本庫 -->
<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>
<!-- 導入Easy UI的擴展函數庫 -->
<scripttype="text/javascript"src="js/jquery.easyui.min.js"></script>
<!-- 自定義腳本 -->
<scripttype="text/javascript">
$(function() {
$("#dg").datagrid({
url :'getDataGridData.action',
singleSelect : true,
iconCls : 'icon-search',
rowNumbers : true,
pagination : true,
pageSize : 3,
pageList : [ 3, 6, 9 ],
fitColumns : true,
striped : true,
columns : [ [ {
field : 'ck',
checkbox : true
}, {
field : 'empId',
title : '員工編號',
width : 100,
sortable:true
}, {
field : 'empName',
title : '員工姓名',
width : 100
}, {
field : 'empJob',
title : '職位',
width : 100
}, {
field : 'empHireDate',
title : '入職日期',
width : 100
}, {
field :'empOfDeptName',
title : '部門名稱',
width : 100
} ] ],
loadMsg : "正在努力加載中，請稍候………………"
});
});
</script>
</head>
<body>
<!--Easy UI的DataGrid插件使用<table></table>標籤來作爲內容存放的區域 -->
<table id="dg" title="投票列表"></table>
</body>
</html>接口：
packagecom.datagrid.dao;
importjava.util.List;
importcom.datagrid.entity.Emp;
/**
* Easy UI的DataGrid的接口
*
* 項目名稱：ReviewOfEasyUIDataGridConnDataBase類名稱：IDataGridDao 類描述： 創建人：SteveJrong
* 創建時間：2015-11-8 下午6:00:17 修改人：SteveJrong 修改時間：2015-11-8 下午6:00:17 修改備註：
*
* @version 1.0 Alpha
*
*/
public interfaceIDataGridDao {
/**
* 分頁獲取員工信息的方法【抽象方法】
*
*@param pageSize
* 每頁顯示的條數
*@param pageIndex
* 當前頁的索引
*@return
*/
List<Emp> getEmpInfo(IntegerpageSize, Integer pageIndex);
/**
* 獲取全部信息條數的方法【抽象方法】
*
*@return
*/
Integer getAllEmpInfo();
}接口的實現類：
packagecom.datagrid.impl;
importjava.util.ArrayList;
import java.util.List;
importorg.hibernate.Session;
importorg.hibernate.criterion.Projections;
importcom.datagrid.config.HibernateSessionFactory;
importcom.datagrid.dao.IDataGridDao;
importcom.datagrid.entity.Emp;
/**
* Easy UI的DataGrid接口的實現類
*
* 項目名稱：ReviewOfEasyUIDataGridConnDataBase類名稱：DataGridDaoImpl 類描述：
* 創建人：SteveJrong 創建時間：2015-11-8 下午6:01:03 修改人：SteveJrong 修改時間：2015-11-8
* 下午6:01:03 修改備註：
*
* @version 1.0 Alpha
*
*/
public classDataGridDaoImpl implements IDataGridDao {
/**
* 分頁獲取員工信息的方法【重寫的方法】
*/
@SuppressWarnings("unchecked")
@Override
public List<Emp> getEmpInfo(IntegerpageSize, Integer pageIndex) {
Session session = null;
List<Emp> list = newArrayList<Emp>();
try {
session =HibernateSessionFactory.getSession();
list =session.createCriteria(Emp.class)
.setFirstResult((pageIndex- 1) * pageSize)
.setMaxResults(pageSize).list();
} catch (Exception e) {
e.printStackTrace();
System.err.println(e.getMessage());
} finally {
session.close();
}
return list;
}
/**
* 獲取全部信息條數的方法【重寫的方法】
*/
@Override
public Integer getAllEmpInfo() {
Session session = null;
Integer sum = 0;
try {
session =HibernateSessionFactory.getSession();
sum = (Integer)session.createCriteria(Emp.class)
.setProjection(Projections.rowCount()).uniqueResult();
} catch (Exception e) {
e.printStackTrace();
System.err.println(e.getMessage());
} finally {
session.close();
}
return sum;
}
}業務類：
packagecom.datagrid.service;
import java.text.SimpleDateFormat;
importjava.util.HashMap;
importjava.util.HashSet;
importjava.util.List;
importjava.util.Map;
importjava.util.Set;
importnet.sf.json.JSONObject;
importcom.datagrid.dao.IDataGridDao;
importcom.datagrid.entity.DataGridNode;
importcom.datagrid.entity.Emp;
importcom.datagrid.impl.DataGridDaoImpl;
/**
* Easy UI的DataGird業務類
*
* 項目名稱：ReviewOfEasyUIDataGrid類名稱：DataGridService 類描述： 創建人：SteveJrong
* 創建時間：2015-11-8 下午3:51:50 修改人：SteveJrong 修改時間：2015-11-8 下午3:51:50 修改備註：
*
* @version 1.0 Alpha
*
*/
public classDataGridService {
private IDataGridDao dataGridDao = newDataGridDaoImpl();
/**
* 獲取DataGird數據的方法【業務邏輯】
*
*@param rows
* 每頁顯示的數據條數
*@param page
* 當前頁數
*@return
*/
public JSONObject getDataGridDatas(Integerrows, Integer page) {
List<Emp> list =dataGridDao.getEmpInfo(rows, page);
// 創建一個Set集合，將獲得的員工集合迭代創建DataGridNode對象並放入Set集合中以轉換爲JSON類型的數據格式
Set<DataGridNode> gridNodes =new HashSet<DataGridNode>();
for (int i = 0; i < list.size();i++) {
gridNodes.add(newDataGridNode(list.get(i).getEmpno(), list.get(i)
.getEname(),list.get(i).getJob(), new SimpleDateFormat(
"yyyy年MM月dd日").format(list.get(i).getHiredate()),list
.get(i).getDept().getDname()));
}
// 創建JSON的根對象，通過JSONObject間接的轉換爲符合Easy UI的DataGrid插件標準的JSON數據
Map<String, Object> map = newHashMap<String, Object>();
map.put("total",dataGridDao.getAllEmpInfo());
map.put("rows",gridNodes);
return JSONObject.fromObject(map);
}
}DataGridNode實體類：
packagecom.datagrid.entity;
importjava.io.Serializable;
/**
* DataGrid封裝的實體類
*
* 項目名稱：ReviewOfEasyUIDataGrid類名稱：DataGridNode 類描述： 創建人：SteveJrong
* 創建時間：2015-11-8 下午4:04:42 修改人：SteveJrong 修改時間：2015-11-8 下午4:04:42 修改備註：
*
* @version 1.0 Alpha
*
*/
public classDataGridNode implements Serializable {
/**
*
*/
private static final long serialVersionUID= 54116480502494904L;
/**
* 員工編號屬性
*/
private Integer empId;
/**
* 員工姓名屬性
*/
private String empName;
/**
* 員工職位屬性
*/
private String empJob;
/**
* 員工入職日期屬性
*/
private String empHireDate;
/**
* 員工所屬部門名稱屬性
*/
private String empOfDeptName;
public Integer getEmpId() {
return empId;
}
public void setEmpId(Integer empId) {
this.empId = empId;
}
public String getEmpName() {
return empName;
}
public void setEmpName(String empName) {
this.empName = empName;
}
public String getEmpJob() {
return empJob;
}
public void setEmpJob(String empJob) {
this.empJob = empJob;
}
public String getEmpHireDate() {
return empHireDate;
}
public void setEmpHireDate(StringempHireDate) {
this.empHireDate = empHireDate;
}
public String getEmpOfDeptName() {
return empOfDeptName;
}
public void setEmpOfDeptName(StringempOfDeptName) {
this.empOfDeptName = empOfDeptName;
}
/**
* 帶五個參數的構造函數
*
*@param empId
* 員工編號
*@param empName
* 員工姓名
*@param empJob
* 員工職位
*@param empHireDate
* 員工入職日期
*@param empOfDeptName
* 員工所屬部門名稱
*/
public DataGridNode(Integer empId, StringempName, String empJob,
String hiredate, StringempOfDeptName) {
super();
this.empId = empId;
this.empName = empName;
this.empJob = empJob;
this.empHireDate = hiredate;
this.empOfDeptName = empOfDeptName;
}
}Action類：
packagecom.datagrid.action;
importjava.io.Serializable;
importnet.sf.json.JSONObject;
importcom.datagrid.service.DataGridService;
import com.datagrid.util.EnumResultType;
importcom.opensymphony.xwork2.ActionSupport;
/**
* Easy UI的DataGrid相關的Action
*
* 項目名稱：ReviewOfEasyUIDataGrid類名稱：DataGridAction 類描述： 創建人：SteveJrong
* 創建時間：2015-11-8 下午5:20:49 修改人：SteveJrong 修改時間：2015-11-8 下午5:20:49 修改備註：
*
* @version 1.0 Alpha
*
*/
public classDataGridAction extends ActionSupport implements Serializable {
/**
*
*/
private static final long serialVersionUID= 329645127608191489L;
/**
* 每頁要顯示數據的條數屬性
*/
private Integer rows;
/**
* 當前頁數屬性
*/
private Integer page;
/**
* 定義JSONObject類型的屬性，用於接收結果
*/
private JSONObject jsonDatas;
public Integer getRows() {
return rows;
}
public void setRows(Integer rows) {
this.rows = rows;
}
public Integer getPage() {
return page;
}
public void setPage(Integer page) {
this.page = page;
}
public JSONObject getJsonDatas() {
return jsonDatas;
}
public void setJsonDatas(JSONObjectjsonDatas) {
this.jsonDatas = jsonDatas;
}
/**
* 默認的執行方法
*/
@Override
public String execute() throws Exception {
jsonDatas = newDataGridService().getDataGridDatas(rows, page);
returnEnumResultType.SUCCESS.getTrueType();
}
}其他工具類：
枚舉類，用於Action結果類型的枚舉：
packagecom.datagrid.util;
/**
* Action枚舉的結果類型
*
* 項目名稱：ReviewOfEasyUIDataGrid類名稱：EnumResultType 類描述： 創建人：SteveJrong
* 創建時間：2015-11-8 下午5:17:29 修改人：SteveJrong 修改時間：2015-11-8 下午5:17:29 修改備註：
*
* @version 1.0 Alpha
*
*/
public enumEnumResultType {
// 定義枚舉類型
SUCCESS("SUCCESS"),FAILED("FAILED"), INPUT("INPUT");
// 枚舉類型的真實類型的屬性，用於獲取某一枚舉類型真實的數據類型
private String trueType;
// 封裝getter方法獲取真實的數據類型
public String getTrueType() {
return trueType;
}
// 創建一個私有構造函數將要獲取的枚舉類型傳入，並找到此枚舉類型的真實數據類型
private EnumResultType(String type) {
this.trueType = type;
}
}struts.xml配置文件：
<?xmlversion="1.0" encoding="UTF-8" ?>
<!DOCTYPEstruts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<package name="json_default"namespace="/" extends="json-default">
<actionname="getDataGridData"class="com.datagrid.action.DataGridAction">
<resultname="SUCCESS" type="json">
<paramname="root">jsonDatas</param>
</result>
</action>
</package>
</struts>總體項目結構：
數據庫表數據（Emp和Dept是多對一的關係，多個員工對應一個部門）：
運行效果：
注意：
在使用ezmorph-1.0.6.jar包提供的JSONObject或JSONArray靜態類轉換JSON數據時，尤其是在轉換Map集合時非常容易轉換失敗，表示爲跳到InvocationTargetException字節碼文件上，控制檯也沒有任何錯誤顯示。
解決方法：
清理緩存，一定要導入ezmorph-1.0.6.jar包，否則很容易轉換失敗。
注意xworkcore包，有時候可能存在兼容性問題。