JeeSite | 數據分頁與翻頁

　　本文章介紹的是JeeSite開源項目二次開發時的一些筆記，對於沒有使用過JeeSite的可以不用往下看了，因為下面的代碼是跟JeeSite二次開發相關的代碼，不做JeeSite的二次開發，以下代碼對您無用，在這里友情提醒，避免浪費您寶貴的時間。

 

　　翻頁功能在各種項目中都會用到，在JeeSite開源項目中使用翻頁也非常的容易，只要在配置文件中進行就可以就可以使用，系統的默認值為30頁。

　　配置文件在src\main\resources\jeesite.properties文件中，配置如下：

page.pageSize=30

　　但是這種配置並不能滿足所有的分頁要求，也就是說在不同的列表中分頁的條數是不同的。如果在配置文件中修改分頁條數，那么會影響到整個項目的分頁，它是一個全局的配置參數，這樣就很不方便了。

 

JeeSite手冊的分頁

　　在做項目的時候，由於使用JeeSite的默認頁數無法滿足項目的需求，因為不可能每個列表頁都以30條記錄作為一頁，因此只能看手冊。看手冊又沒有具體理解如何使用，JeeSite手冊中最分頁的描述如下：

// 設置分頁參數，則分頁，如果不設置，則根據條件獲取全部
user.setPage(page);
// 執行分頁查詢
page.setList(userDao.findPage(user));

　　按照手冊的方法簡單的嘗試了一下，但是沒有效果，因此就只能查看分頁的源碼了。

 

分頁源碼

　　在使用開源項目的時候遇到問題，如果又沒有手冊，或者手冊說明不是特別詳細的話，除了在網上找資料外，就只剩下閱讀開源項目的源代碼了。（注：關於分頁這個問題在網上還是有很多人問的，大部分都是說修改配置文件，但是同樣無法滿足提問人的需要，因為大家需要的是不同的列表中有不同的分頁條數。）

　　在Eclipse下按下Ctrl+Shift+R，輸入“page.java”，然后打開該Java文件。看一下Page類的構造方法，代碼如下：

/**
 * 構造方法
 * @param request 傳遞 repage 參數，來記住頁碼
 * @param response 用於設置 Cookie，記住頁碼
 */
public Page(HttpServletRequest request, HttpServletResponse response){
    this(request, response, -2);
}

/**
 * 構造方法
 * @param request 傳遞 repage 參數，來記住頁碼
 * @param response 用於設置 Cookie，記住頁碼
 * @param defaultPageSize 默認分頁大小，如果傳遞 -1 則為不分頁，返回所有數據
 */
public Page(HttpServletRequest request, HttpServletResponse response, int defaultPageSize){
    // 設置頁碼參數（傳遞repage參數，來記住頁碼）
    String no = request.getParameter("pageNo");
    if (StringUtils.isNumeric(no)){
        CookieUtils.setCookie(response, "pageNo", no);
        this.setPageNo(Integer.parseInt(no));
    }else if (request.getParameter("repage")!=null){
        no = CookieUtils.getCookie(request, "pageNo");
        if (StringUtils.isNumeric(no)){
            this.setPageNo(Integer.parseInt(no));
        }
    }
    // 設置頁面大小參數（傳遞repage參數，來記住頁碼大小）
    String size = request.getParameter("pageSize");
    if (StringUtils.isNumeric(size)){
        CookieUtils.setCookie(response, "pageSize", size);
        this.setPageSize(Integer.parseInt(size));
    }else if (request.getParameter("repage")!=null){
        size = CookieUtils.getCookie(request, "pageSize");
        if (StringUtils.isNumeric(size)){
            this.setPageSize(Integer.parseInt(size));
        }
    }else if (defaultPageSize != -2){
        this.pageSize = defaultPageSize;
    }
    // 設置頁面分頁函數
    String funcName = request.getParameter("funcName");
    if (StringUtils.isNotBlank(funcName)){
        CookieUtils.setCookie(response, "funcName", funcName);
        this.setFuncName(funcName);
    }else if (request.getParameter("repage")!=null){
        funcName = CookieUtils.getCookie(request, "funcName");
        if (StringUtils.isNotBlank(funcName)){
            this.setFuncName(funcName);
        }
    }
    // 設置排序參數
    String orderBy = request.getParameter("orderBy");
    if (StringUtils.isNotBlank(orderBy)){
        this.setOrderBy(orderBy);
    }
}

/**
 * 構造方法
 * @param pageNo 當前頁碼
 * @param pageSize 分頁大小
 */
public Page(int pageNo, int pageSize) {
    this(pageNo, pageSize, 0);
}

/**
 * 構造方法
 * @param pageNo 當前頁碼
 * @param pageSize 分頁大小
 * @param count 數據條數
 */
public Page(int pageNo, int pageSize, long count) {
    this(pageNo, pageSize, count, new ArrayList<T>());
}

/**
 * 構造方法
 * @param pageNo 當前頁碼
 * @param pageSize 分頁大小
 * @param count 數據條數
 * @param list 本頁數據對象列表
 */
public Page(int pageNo, int pageSize, long count, List<T> list) {
    this.setCount(count);
    this.setPageNo(pageNo);
    this.pageSize = pageSize;
    this.list = list;
}

　　從源碼中可以看出Page類有很多的構造方法，如果需要自定義每頁有多少條記錄，那么需要使用的構造方法是第二個構造方法，代碼如下：

/**
 * 構造方法
 * @param request 傳遞 repage 參數，來記住頁碼
 * @param response 用於設置 Cookie，記住頁碼
 * @param defaultPageSize 默認分頁大小，如果傳遞 -1 則為不分頁，返回所有數據
 */
public Page(HttpServletRequest request, HttpServletResponse response, int defaultPageSize){
    // 設置頁碼參數（傳遞repage參數，來記住頁碼）
    String no = request.getParameter("pageNo");
    if (StringUtils.isNumeric(no)){
        CookieUtils.setCookie(response, "pageNo", no);
        this.setPageNo(Integer.parseInt(no));
    }else if (request.getParameter("repage")!=null){
        no = CookieUtils.getCookie(request, "pageNo");
        if (StringUtils.isNumeric(no)){
            this.setPageNo(Integer.parseInt(no));
        }
    }

　　這個構造方法比系統默認生成代碼使用的構造函數多了一個參數——defaultPageSize，這個參數可以用來設置每頁的記錄數，調用方法如下：

Page<Xxx> p = new Page<Xxx>(request, response, 10);
Page<Xxx> page = xxxService.findPage(p, xxx);

　　JeeSite生成的代碼中調用的方法如下（JeeSite有一個代碼生成的功能，代碼生成中對分頁的使用如下）：

Page<Xxx> page = xxxService.findPage(new Page<Xxx>(request, response), xxx);

　　在該源碼上下斷點，發現這里在實例化Page類時，調用的構造方法如下：

/**
 * 構造方法
 * @param request 傳遞 repage 參數，來記住頁碼
 * @param response 用於設置 Cookie，記住頁碼
 */
public Page(HttpServletRequest request, HttpServletResponse response){
    this(request, response, -2);
}

　　在該構造方法中同樣調用的是Page.java中第二個構造方法。

 

JS翻頁

　　在JeeSite中使用了BootStrap的前端庫，使用這個前端庫可以很容易的使用“彈出的模態對話框”。使用模態對話框，可能會是一個表單提交一些數據，也可能是其他表單數據列表。使用模態對話框時，如果是數據列表的話，那么也會涉及到列表分頁的問題。調用的代碼如下：

<div class="control-group">
    <label class="control-label">個人信息：</label>
    <div class="controls">
        <input type="text" name="personName" />
        <form:hidden path="personId" />
        <span class="help-inline"><font color="red">*</font> </span><a
            href="url/Controller..."
            role="button" class="btn" data-target="#PersonModal"
            data-toggle="modal">選擇</a>
    </div>
</div>
……
<div id="PersonModal" class="modal hide fade" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">×</button>
        <h3 id="PersonModalLabel">選擇人員</h3>
    </div>
    <div class="modal-body" id="PersonBody"></div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
        <button class="btn btn-primary" id="selectPerson">確定</button>
    </div>
</div>

　　當點擊上半段代碼的“選擇”按鈕時，通過href指定的URL地址可以將另外一個頁面顯示到該頁面中，然后獲取到的數據會在下半段代碼的具有屬性“modal-body”的div中顯示出來。這時，顯示的是另外一個頁面的內容的，而顯示頁面的JS代碼是無法帶過來的。那么，翻頁默認調用的JS代碼就不能使用了。翻頁的代碼如下：

function page(n,s){
    $("#pageNo").val(n);
    $("#pageSize").val(s);
    $("#searchForm").submit();
    return false;
}

　　這段代碼是就無法調用了，那么要翻頁就需要重新定義了，並且，重新定義后的JS代碼要在完成分頁的情況下將數據仍然顯示到“modal-body”中。但是重新定義一個翻頁的JS函數如何讓頁碼列表調用呢？

　　在Page類中，提供了一個非常實用的方法，它可以指定翻頁的JS函數，方法如下：

/**
 * 設置點擊頁碼調用的js函數名稱，默認為page，在一頁有多個分頁對象時使用。
 * @param funcName 默認為page
 */
public void setFuncName(String funcName) {
    this.funcName = funcName;
}

　　有了這個函數就可以完成翻頁了，甚至在多個模態對話框中都使用到需要翻頁的列表，也可以解決了。調用方法如下：

Page<Xxx> p = new Page<Xxx>(request, response, 10);
p.setFuncName("ctPage");
Page<Xxx> page = xxxService.findPage(p, xxx);

　　這樣，生成的分頁頁碼中在調用翻頁函數時，就可以調用自定義的翻頁函數ctPage()了。定義的翻頁方法如下：

function hrPage(n, s) {         
    $.ajax({  
        type: "POST",  
        url:"${ctx}/...",   // 具體的地址省略
        data:{pageNo:n, pageSize:s},
        async: false,
        error: function(request) { 
            
        },
        success: function(data) {
            $('#PersonBody').empty();
            $('#PersonBody').append(data);
        }
    });
}

　　函數體就是自定義的翻頁方法了。

 

　　這些都是我在實際使用JeeSite時所遇到的問題的解決方法。有問題歡迎討論！！

 

　　關於JeeSite的另一篇筆記是：JeeSite中Excel導入導出

 

---

 

我的微信公眾號：“碼農UP2U”