easyui datagrid 分頁 詳解
1.介面
2.前端程式碼
<table id="dg" title="文章管理" class="easyui-datagrid" fitColumns="true" pagination="true"
url="${pageContext.request.contextPath}/admin/showAllTrainee" toolbar="#tb" rownumbers="true">
<thead>
<tr>
<th field="cb" checkbox="true" align="center"></th>
<th field="tid" width="20" align="center" hidden="true"></th>
<th field="title" width="200" formatter="formatTitle">標題</th>
<th field="time" width="100" align="center">釋出日期</th>
<th field="tname" width="100" align="center">實習生姓名</th>
<th field="major" width="100" align="center">專業</th>
<th field="view_num" width="30" align="center">閱讀量</th>
<th field="aname" width="100" align="center">釋出者</th>
</tr>
</thead>
</table>3.後端我用的是springmvc處理資料，返回json串
package com.jyb.pojo;
/**
*
* @author
* @時間 2016-08-06
*
*/
public class Page {
private int page; //當前第幾頁
private int rows; //每頁顯示記錄數
private int firstPage; //第幾條記錄起始
public Page(int page, int rows){
this.page = page;
this.rows = rows;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
public int getFirstPage() {
firstPage = (page - 1) * rows;
return firstPage;
}
}/**
* @author
* @時間 2016-08-06
* @param page 當前第幾頁
* @param rows 每頁顯示的記錄數
* @param title
* @return Map
*/
@SuppressWarnings({ "rawtypes", "unchecked" })
@ResponseBody
@RequestMapping(value="/showAllTrainee")
public Map showAllTrainee(@RequestParam(value="page", required=false) String page,
@RequestParam(value="rows", required=false) String rows, @RequestParam(value="title", required=false) String title){
Page pageBean = new Page(Integer.parseInt(page), Integer.parseInt(rows));
Map reMap = new HashMap();
Map paraMap = new HashMap();
paraMap.put("title", title);
paraMap.put("firstPage", pageBean.getFirstPage());
paraMap.put("rows", pageBean.getRows());
try {
List<Map> list = adminService.showAllTrainee(paraMap);
long total = adminService.getTraineeTotal(paraMap);
reMap.put("rows", list); //存放每頁記錄數
reMap.put("total", total); //存放總記錄數 ，必須的
} catch (Exception e) {
e.printStackTrace();
}
return reMap;
}其中controller中必須返回json字串所以加了@ResponseBody註解。
4.mybatis對映檔案
<select id="selectTraineeLimit" parameterType="map" resultType="map">
select
trainee.tid,
admin.name aname,
trainee.name tname,
trainee.major,
trainee.time,
trainee.title,
trainee.view_num
from
trainee, admin
<where>
<if test="title != null and title != ''">
and trainee.title like concat('%',#{title},'%')
</if>
and trainee.aid = admin.aid
</where>
order by
trainee.time desc, trainee.tid
limit
#{firstPage},
#{rows};
</select>
<select id="getTraineeTotal" parameterType="map" resultType="long">
select count(tid) from trainee
<where>
<if test="title != null and title != ''">
and trainee.title like concat('%',#{title},'%')
</if>
<if test="name != null and name != ''">
and name like concat('%',#{name},'%')
</if>
<if test="major != null and major != ''">
and major like concat('%',#{major},'%')
</if>
<if test="city != null and city != ''">
and city like concat('%',#{city},'%')
</if>
<if test="company != null and company != ''">
and company like concat('%',#{company},'%')
</if>
<if test="title != null and title != ''">
and title like concat('%',#{title},'%')
</if>
</where>
</select>
其他程式碼就不上了，特寫出重點的方便自己或別人作為參考。如果有什麼問題大家可以留言，我看見了會解答。
附：
table easyui-datagrid 生成一個表格。
屬性如下：
1)title:該DataGrid面板的標題文字。
2)iconCls:一個CSS類，將提供一個背景圖片作為標題圖示。
3)border：當true時，顯示該datagrid面板的邊框。
4)width:面板寬度，自動列寬。
5)height:面板高度，自動列高。
6)columns:該DataGrid列配置物件，檢視column屬性可獲取更多資訊。
7)frozenColumns:跟Columns屬性相同，但是這些列將會被固定在左邊。
8)striped:當true時，單元格顯示條紋。預設false。
9)method:通過該方法型別請求遠端資料。預設post。
10)nowrap:當true時，顯示資料在同一行上。預設true。
11)idField:說明哪個欄位是一個標識欄位。
12)url:一個URL，從遠端站點獲取資料。
13)loadMsg:當從遠端站點載入資料時，顯示一個提示資訊。預設"Processing,please wait …"。自定義覆蓋。
14)pagination:當true時在DataGrid底部顯示一個分頁工具欄。預設false。
15)rownumbers:當true時顯示行號。預設false。
16)singleSelect:當true時只允許當前選擇一行。預設false。
17)fit:當true時，設定大小以適應它的父容器。預設false。
18)pageNumber:當設定分頁屬性時，初始化的頁碼編號。預設從1開始
19)pageSize:當設定分頁屬性是，初始化的頁面大小。預設10行
20)pageList:當設定分頁屬性時，初始化頁面的大小選擇清單。預設[10,20,30,40,50]
21)queryParams:當請求遠端資料時，也可以傳送額外的引數。
22)sortName:定義哪列可以排序。
23)sortOrder:定義列的排列順序，只能是'asc'或'desc'。預設asc。
Column屬性如下：
1)title:該列標題文字。
2)field:該列對應的欄位名稱。
3)width：列寬。
4)rowspan:說明該單元格需要多少行數。
5)colspan:說明該單元格需要多少列數。
6)align:說明Column資料的對齊方式。'left'，'right'，'center' 都可以使用。
7)sortable:當true時，允許該列進行排序。
8)checkbox:當true時，允許該列出現checkbox。
事件如下：
1)onLoadSuccess:當遠端資料載入成功是啟用。
2)onLoadError:當遠端資料載入發現一些錯誤時啟用。
3)onClickRow:當用戶點選某行時啟用，引數包含：
rowIndex: 點選的行索引，從0開始。
rowData: 點選行時對應的記錄。
4)onDblClickRow:當用戶雙擊某行時啟用，引數包含：
rowIndex: 點選的行索引，從0開始。
rowData: 點選行時對應的記錄。
5)onSortColumn:當用戶對某列排序時啟用，引數包含：
sort:排序欄位名稱。
order:排序欄位型別。
6)onSelect:當用戶選擇某行時啟用，引數包含:
rowIndex: 點選的行索引，從0開始。
rowData: 點選行時對應的記錄。
7)onUnselect:當用戶取消選擇某行時啟用，引數包含:
rowIndex: 點選的行索引，從0開始。
rowData: 點選行時對應的記錄。
方法如下：
1)options:返回選擇物件。
2)resize:重調大小，生成佈局。
3)reload:重新載入資料。
4)fixColumnSize:固定列大小。
5)loadData:載入本地資料，過去的行會被刪除。
6)getSelected:返回第一個選中行的記錄，若未選返回null。
7)getSelections:返回選中的所有行，當沒有選擇記錄時將返回空陣列。
8)clearSelections:清除所有選項的選擇狀態。
9)selectRow:選擇一行，行索引從0開始。
10)selectRecord:通過傳遞一個ID值引數，選擇一行。
11)unselectRow:取消選擇一行。