前端分頁神器，jquery grid的使用（前後端聯調），讓分頁變得更簡單。
jquery grid 是一款非常好用的前端分頁外掛，下面來講講怎麼使用。
首先需要引入jquery grid 的CSS和JS （我們使用的是bootstrap的樣式）
下面我們通過一個例子來講解，需求是：查詢使用者列表（支援分頁功能）。
一、前端
html頁面
js
// 定義舉報列表物件 var userList = function () { // 舉報列表 var handleUserList = function() { var jqGrid = $("#usersList"); jqGrid.jqGrid({ caption: "短視訊使用者列表", //標題 url: "/video/user/queryUser", //請求的url mtype: "post", //請求方式 styleUI: "Bootstrap",//設定jqgrid的全域性樣式為bootstrap樣式 datatype: "json", colNames: ['ID', '頭像', '使用者名稱', '暱稱', '粉絲數', '關注數', '獲贊數'], colModel: [ //這裡的name的值必須和pojo中的屬性對應 { name: 'id', index: 'id', width: 30, sortable: false, hidden: false }, { name: 'faceImage', index: 'faceImage', width: 50, sortable: false, formatter:function(cellvalue, options, rowObject) { varsrc = cellvalue; //cellvalue是存在資料庫中的相對路徑 var img = "<img src='" + src + "' width='100'></img>" return img; } }, { name: 'username', index: 'username', width: 30, sortable: false }, { name: 'nickname', index: 'nickname', width: 35, sortable: false }, { name: 'fansCounts', index: 'fansCounts', width: 25, sortable: false }, { name: 'followCounts', index: 'followCounts', width: 25, sortable: false }, { name: 'receiveLikeCounts', index: 'receiveLikeCounts', width: 25, sortable: false, hidden: false } ], viewrecords: true, // 定義是否要顯示總記錄數 rowNum:8, // 在grid上顯示記錄條數(每一頁顯示的記錄數)，這個引數是要被傳遞到後臺 (需要需要的是，後臺對應的引數名是rows 而不是 pageSize) rownumbers: true, // 如果為ture則會在表格左邊新增一列，顯示行順序號，從1開始遞增。此列名為'rn' autowidth: true, // 如果為ture時，則當表格在首次被建立時會根據父元素比例重新調整表格寬度。如果父元素寬度改變，為了使表格寬度能夠自動調整則需要實現函式：setGridWidth height: 800, // 表格高度，可以是數字，畫素值或者百分比 rownumWidth: 36, // 如果rownumbers為true，則可以設定行號 的寬度 pager: "#usersListPager", // 分頁控制元件的id subGrid: false // 是否啟用子表格 }).navGrid('#usersListPager', { edit: false, add: false, del: false, search: false }); // 隨著視窗的變化，設定jqgrid的寬度 $(window).bind('resize', function () { var width = $('.usersList_wrapper').width()*0.99; jqGrid.setGridWidth(width); }); // 不顯示水平滾動條 jqGrid.closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); // 條件查詢所有使用者列表 $("#searchUserListButton").click(function(){ var searchUsersListForm = $("#searchUserListForm"); jqGrid.jqGrid().setGridParam({ page: 1, //第幾頁 url:"/video/user/queryUser?" + searchUsersListForm.serialize(), }).trigger("reloadGrid"); }); /** * 按下鍵盤觸發js */ $('#searchUserListForm input').keypress(function (event) { //當按下回車時 if (event.keyCode==13) { var searchUsersListForm = $("#searchUserListForm"); jqGrid.jqGrid().setGridParam({ page: 1, //第幾頁 url:"/video/user/queryUser?" + searchUsersListForm.serialize(), }).trigger("reloadGrid"); } }); }; return { // 初始化各個函式及物件 init: function () { handleUserList(); } }; }(); jQuery(document).ready(function() { userList.init(); });
js程式碼中有幾個關鍵的點：
1.colModel中的name屬性必須和後臺返回的pojo的屬性名一致，不然頁面上不會顯示資料。
2.formatter:function(cellvalue,options,rowObject){} 方法非常的好用，其中cellvalue表示從後臺返回的該屬性的屬性值，options不重要，一般用不到，rowObject表示該行的JSON物件，我們可以通過rowObject.屬性名來獲取到該行各個列的屬性值，這在某些需求中是很有用的。
3.rowNum 表示在前端顯示的每一頁的行數，如果後臺返回的list的行數大於rowNum,仍然以每一頁顯示rowNum為準。rowNum這個引數是需要傳遞給後臺的，不過傳遞給後臺時，需要用rows引數名來接收（這個非常重要，如果你後臺用rowNum引數名來接收的話，是不能夠接收到的）。
4.當我們操作了表格修改了後臺的資料之後我們需要對前端的表格進行重新整理，在重新整理表格的時候我們也有兩種方式，第一種是帶條件的重新整理，第二種是不帶條件的。
4.1 帶條件的重新整理
這裡我們重新整理的時候可以通過setGridParam帶上條件，page表示第幾頁，url表示請求的地址
4.2 不帶條件的
setTimeout(function () { //刪除成功之後重新整理一下表格 var jqGrid = $("#userList"); jqGrid.jqGrid().trigger("reloadGrid"); },100);
這裡，我們就是直接對前臺的表格進行了重新整理，不帶條件。
二、在前端的程式碼介紹完之後，我們去看看後臺的程式碼
public JqueryGrid queryUser(Users users, @RequestParam("page") Integer pageNum,@RequestParam("rows") Integer pageSize){ if(pageNum==null ||pageNum<=0){ pageNum = 1; } if(pageSize==null||pageSize<=0){ pageSize = Const.pageSize; } JqueryGrid jqueryGrid = userService.selectUserListMulti(pageNum,pageSize,users); return jqueryGrid; }
這裡也有幾個點需要注意的，不然後臺接收不到引數，1.page表示第幾頁 2. rows表示一頁顯示的記錄數。這兩個引數的引數名必須是這個，這是與jquery grid約定好的。
然後該方法返回的是一個 JqueryGrid物件，我們先去看看這個類的程式碼：
import java.util.List; /** * @Description: 封裝分頁後的資料格式(當前端使用了jqueryGrid的分頁外掛的時候， * 我們必須返回該對類的例項化物件的JSON串，並且屬性名是固定的，這樣才能夠被前端的jquerygrid給識別， * 然後頁面 * 才能成功渲染) */ public class JqueryGrid { private int page; // 當前頁數 private int total; // 總頁數 private long records; // 總記錄數 private List<?> rows; // 每頁顯示的內容 public int getPage() { return page; } public void setPage(int page) { this.page = page; } public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } public long getRecords() { return records; } public void setRecords(long records) { this.records = records; } public List<?> getRows() { return rows; } public void setRows(List<?> rows) { this.rows = rows; } }
需要注意的是，我們後臺只有返回含有該幾個屬性（屬性名必須是這幾個）的物件，才能夠被我們的Jquery grid給識別（這也是和jquery grid約定好的），前端的頁面才能夠顯示資料，最開始我返回的是一個封裝JqueryGrid類的一個物件，結果前端資料不顯示。
最終的效果:
===========================================================================
至此，前端分頁神器jquery grid的簡單使用，以及與後臺的聯調就介紹到這裡，博文中提到的注意點一定要注意，不然很有可能後臺接受不到引數，或者前端得到資料之後不在頁面上進行顯示。
最後，附上 jquery grid的學習文件的連結 http://blog.mn886.net/jqGrid/