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

1.1 預期效果

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

1.2 實現思路

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

2.1 準備模板

準備内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Pagination\GroupPagination.cpt

點擊下載模板：

GroupPagination.cpt

打開模板，模板樣式如下圖所示：

2.2 自定義按鈕

1）點擊模板>模板 Web 屬性>分頁預覽設置,選擇爲該模板單獨設置，爲工具欄增加一個自定義按鈕，如下圖所示：

2）點擊自定義的按鈕，進入工具欄設置，設置此自定義按鈕名字爲「跳轉」，選擇跳轉圖标，如下圖所示：

JavaScript 代碼如下：

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

3）爲使用方便性，點擊上升按鈕可将自定義按鈕移動到當前頁下方，如下圖所示：

2.3 效果預覽

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

注：不支持移動端。

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具欄JS實例\05-JS實現工具欄增加跳轉到指定頁面按鈕.cpt

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