Easy UI的Tree外掛和DataGrid外掛實戰
阿新 • • 發佈：2019-01-17
一、 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包，有時候可能存在相容性問題。
相關推薦
Easy UI的Tree外掛和DataGrid外掛實戰
一、 Easy UI的Tree（樹狀圖）外掛 1. 基本使用步驟： 前端： 1) 在頁面引入easyui.css和icon.css樣式檔案，引入jQuery基礎指令碼庫和jquery.easyui.min.js擴充套件函式庫； 2) 在頁面定義用來放置Tree元件
EOS智慧合約開發（十八）從EOS資料分析history_plugin外掛和MongoDB外掛區別
EOS資料 從EOS上線一段時間來看，他產生的Block已經遠遠超過了以太坊。以太坊在交易完成後，很容易過濾出交易資訊（如何獲取在我之前以太坊文章中有詳細描述）。EOS機制與以太坊有卻別，EOS如此大的資料量，我們就會問，EOS資料時如何獲取，查詢。今天我們就這個問題，給大家分析一下。
以mybatis-generator為基礎的外掛擴充套件jeasy-mybatis-generator，目前擴充套件了分頁外掛和模板外掛
jeasy-mybatis-generator原始碼生成外掛 jeasy-mybatis-generator以mybatis-generator為基礎擴充套件外掛，目前擴充套件了分頁外掛和模板外掛 test包中的程式碼結構，可以直接執行測試 分頁外掛使用 在
spring boot mybatiscodehelper外掛和pagehelper外掛
1.idea搜尋外掛MybatisCodeHelper下載 需要啟用碼https://github.com/gejun123456/MyBatisCodeHelper-Pro 2.右下角外掛新增表，選擇mapperAnnotation,lombok,Serializable 3.新增方法
1.Convention外掛和ConfigBrowser外掛的用法和注意事項
Convention外掛 在配置基本的Struts2框架後，引入Convention外掛會簡化開發者的配置工作。安裝Convention外掛非常簡單，只需要將struts2-convention-plugin-2.*.*.jar 檔案複製到Struts2應用的WEB-I
Mybatis外掛原理和PageHelper結合實戰分頁外掛
今天和大家分享下mybatis的一個分頁外掛PageHelper,在講解PageHelper之前我們需要先了解下mybatis的外掛原理。PageHelper 一、Plugin介面 mybatis定義了一個外掛介面org.apache.ibatis.plugi
自定義Gradle外掛和AspectJ實戰
生成gradle外掛步驟 create new Module select Android Library 把生成的module（例如：plugin）裡面的東西都刪除（除了build.gradle，但是要被gradle裡面的所有內容刪除） 在plugin
JFinal配置資料庫連線池外掛和表類對映
配置資料庫連線池外掛，此處以Druid為例，還需要配置資料庫訪問外掛，即ActiveRecord外掛，用於建立資料庫中Table和Java Bean的mapping對映： public void configPlugin(Plugins me) { // 配置 druid
Android Sutdio的常用快捷鍵和必備外掛，繪製介面和除錯應用
常用快捷鍵 程式碼跳轉 描述：跳轉是為了方便程式碼位置的定位，存在兩種跳轉：在定義處可以跳轉到呼叫處，在呼叫處可以跳轉到定義處。 快捷鍵：Ctrl + 滑鼠單擊 方法間跳轉 描述：從一個類方法跳轉到臨近的一個類方法。 快捷鍵：Alt + Up/Down
Sublime Text3（mac）一些外掛和快捷鍵
Sublime Text3（mac）一些外掛和快捷鍵 楚簡約 關注 2017.02.24 17:02* 字數 1216 閱讀 412評論 0喜歡 2 下載地址http://www.sublimetext.
QGIS3和QGIS2外掛開發差異記錄
qgis2外掛開發的入門級教程 http://www.qgistutorials.com/zh_TW/docs/building_a_python_plugin.html 仿造該教程在qgis3當中進行開發，會碰到許多坑。這裡簡單記錄一下。 1. QGIS3 中，QFileD
VS Code：讓你工作效率翻倍的23個外掛和23個編輯技巧
總結了一些平時常用且好用的 VS Code 的外掛和編輯技巧分享出來。 文章詳情可查閱我的部落格：lishaoy.net ，歡迎大家訪問。 外觀 主題 這裡我分享兩款主題： Material Theme 效果如圖： Material Theme An O
webpack簡單運用(構建html 安裝外掛和loader)
目錄 webpack是什麼? webpack配置步驟 安裝loader 安裝外掛 打包 webpack是什麼? 在webpack的世界裡,每個檔案都是一個模組,比如.css、.js、.html等。對於不同的模組，則需要不同的載入
CSSanimation和SwiperAnimation外掛
css的animation屬性是css3新增的一個動畫屬性，這個屬性比較簡單實用，甚至可以替代一些要js才能做的動畫。 語法: 值 說明 animation-name 繫結 frames的名字
chosen(下拉列表帶搜尋外掛)和layer(彈出框外掛)在一起使用會有衝突，解決辦法
可以選擇用window.open()和chosen外掛結合使用，這樣就不會有衝突。 chosen外掛的使用： 1、先把js和css檔案引用到網頁裡面去： <link href="js/jqueryUI/chosen/chosen.css" ty
自動生成mapper和domain外掛
在maven專案中pom檔案中加入如下外掛 <plugin> <groupId>org.apache.maven.plugins</groupId> <arti
Elasticsearch安裝和相關外掛的安裝
Elasticsearch官網：https://www.elastic.co/cn/products/elasticsearch Elasticsearch下載：在這裡選擇適合自己的sha 安裝（elasticsearch無需安裝，解壓即用） 雙擊
API閘道器Kong（四）：功能梳理和外掛使用-認證外掛使用
作者: 李佶澳 轉載請保留：原文地址 釋出時間：2018/10/18 11:14:00 說明 部署一個echo應用 Basic Auth Key Auth J
eclipse安裝hibernate外掛和搭建框架
安裝冬眠外掛 下載地址： http://tools.jboss.org/downloads/jbosstools/mars/4.3.1.Final.html 安裝說明 1，幫助 - >安裝新軟體... 2，點選新增... 3，在對話方塊新增站點對話方塊中，單擊存檔.
angular6引入jquery和jquery外掛
文章參考 Angular雜談系列1-如何在Angular2中使用jQuery及其外掛 angular4引入jQuery和基於jQuery的外掛！ 案例說明 一、angular-cli.json引入jquery和jquery外掛 "scripts": [