JS實現點選跳轉按鈕跳轉到指定頁面

1.1 版本

1.1 預期效果

報表分頁預覽時，工具欄預設提供了跳轉到首頁，上一頁，下一頁，最後一頁的按鈕，如果需要跳轉到指定頁，需要輸入頁碼後按回車才能跳轉。但很多人不習慣return 鍵操作，習慣在工具欄點選按鈕實現跳轉，那如何實現在工具欄新增一個跳轉按鈕，點選跳轉呢？如下圖所示：

1.3 實現思路

在「分頁預覽設定」下，工具欄建立一個按鈕，按鈕「自訂事件」中獲取工具欄頁面輸入框的值，跳轉到輸入值頁面。

2.1 準備範本

點選下載範本：GroupPagination.cpt

開啟範本，範本樣式如下圖所示：

2.2 自訂按鈕

1）點選「範本>範本 Web 屬性>分頁預覽設定」,選擇為「該範本單獨設定」，為工具欄增加一個自訂按鈕，如下圖所示：

2）點選自訂的按鈕，進入工具欄設定，設定此自訂按鈕名稱為「跳轉」，選擇跳轉圖示，如下圖所示：

JavaScript 程式碼如下：

var page=$('.x-toolbar input').val();//獲取工具欄頁面輸入框的值
contentPane.gotoPage(parseInt(page));//跳轉到指定頁面，這裏需要將上面的值轉成數值類型

3）為使用方便性，點選上升按鈕可將自訂按鈕行動到當前頁下方，如下圖所示：

2.3 效果預覽

儲存範本，選擇「分頁預覽」，輸入頁面數，點選「跳轉」按鈕，即可跳轉到對應頁面。如下圖所示：

注：不支援行動端。

點選下載範本：05-JS實現工具欄增加跳轉到指定頁面按鈕.cpt