asyUI分頁中，如何實現頁面跳轉，再返回時，...

純潔的程式碼發表於2020-01-08
UI

easyUI中，分頁情況下，跳轉到其他頁面修改資料，再返回時，相當於重新開啟此頁面，即顯示第一頁。 這樣很不方便。故提出跳轉回修改前的頁面的需求。

通過網上搜尋，瞭解到實現頁面跳轉回去的基本原理是：傳遞當前頁碼到另一頁，然後另外一頁接收頁碼值再傳回到原頁面。如果考慮頁面顯示條數的變動，也可以將頁面顯示條數值進行傳遞。

不過多廢話，直接上原始碼，僅需在需更改的頁面新增如下程式碼即可。

一、帶有分頁的頁面：

1、取得當前分頁的頁碼值和每頁顯示條數

當前分頁的頁碼值

var grid= $('#dg'); //table的ID

var options =grid.datagrid('getPager').data("pagination").options;
var thisPageNumber= options.pageNumber; //獲得當前頁

當前每頁顯示條數

var grid= $('#dg'); //table的ID
var options = grid.datagrid('getPager').data("pagination").options;
var thisPageSize = options.pageSize; //獲得當前頁的單頁顯示數目


2、分頁的頁碼值和每頁顯示條數，獲得後用於設定當前頁面顯示

//分頁傳進去的引數
$(function(){
var pg = "${pageNumber}";
var ps = "${pageSize}";
/* */
if(pg!=null && pg!=''){
$("#dg").datagrid('getPager').pagination('refresh',{pageSize:ps});
}
if(ps!=null&&ps!=''){
$("#dg").datagrid('getPager').pagination('select',parseInt(pg)); （此處需注意用了parseInt的方法，如果不使用此方法，當跳轉回來沒有問題，但點選下一頁時，回直接跳轉到最後一頁。具體原因可以參考一下：3y.uu456.com/bp_8w9fu2ah…）
}
})

二、修改頁面

在URL後邊直接新增需要傳遞的引數"?pageNumber="+"${pageNumber}"+"&pageSize="+"${pageSize}"。

我的需要跳轉到後臺，相應的URL如下，'${pageContext.request.contextPath}/food/edit.do?commidityId='+commodityId+"&pageNumber="+"${pageNumber}"+"&pageSize="+"${pageSize}");。

只要新增如上資訊，就可以搞定頁面跳轉顯示問題了。

本人的專案採用SSM框架，從帶有分頁的頁面跳轉到修改頁面和從修改頁面返回到帶有分頁的頁面，之間都通過後臺的controller跳轉，其中涉及到controller接收引數並繼續向下傳遞引數，我僅僅是放在了request.setAttribute()中。另本人採用的是假分頁，如採用真分頁，請進行一定的修改。

更多免費學習資源可關注：itheimaGZ 獲取

相關文章