前端分頁神器，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) {
                        var src =  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/