［通用］組件導航快速定位

1.1 版本

1.2 應用場景

• 範本頁面較長時，使用者希望透過點選側邊導航定位到本頁面的指定組件位置。以 App 為例，如下圖所示：

• 範本頁面較長時，使用者希望透過點選超連結定位到本頁面的指定組件位置。以 App 為例，如下圖所示：

僅決策報表支援此功能。

1）body 的行動端面板勾選「手機重佈局」時：

• body 的行動端面板支援設定「導航樣式」。

• body 的行動端面板、Tab 塊的 tabpane 的行動端面板 、絕對畫布塊 absolute 的 行動端面板支援設定「顯示該層級下的組件導航」。

• 其餘組件和元件的行動端面板支援設定「使用導航」。

2）實現快速定位組件，有以下兩種方法：

• 設定導航樣式為「側邊導航」。

  無需設定導航樣式，導航樣式保持為預設「無」，設定 JS 超連結。

2.1 導航樣式

2.1.1 功能入口

1）選中「body」，點選「行動端」。

2）勾選「手機重佈局」，則出現「導航樣式」設定。

3）點選 導航樣式 旁的「...」按鈕，進入導航樣式設定介面，分為「無」和「側邊導航」。

2.1.2 側邊導航

1）「側邊導航」的設定介面如下圖所示：

2）具體設定項如下表所示：

2.2 顯示該層級下的組件導航

1）body 的行動端面板勾選了「手機重佈局」之後，body 的行動端面板 、 Tab 塊的 tabpane 的行動端面板、絕對畫布塊 absolute 的行動端面板才會出現「顯示該層級下的組件導航」。

2）其中，body 的「顯示該層級下的組件導航」在勾選「手機重佈局」後自動勾選，其餘 Tab 塊的 tabpane 、絕對畫布塊 absolute 的「顯示該層級下的組件導航」需要手動勾選。如下圖所示：

注： body 下除普通組件外，還有絕對畫布塊、Tab 塊等容器時， body 和 body 下的容器都勾選了「顯示該層級下的組件導航」，預覽時只顯示最外層容器的導航。

2.3 使用導航

body 的行動端面板勾選了「手機重佈局」之後，其餘組件和元件的行動端面板中才會出現「使用導航」。如下圖所示：

注1：「導航名稱」預設為元件名，可自訂，支援換行符、空格符；若名稱過長，則截斷顯示。

注2：凍結組件不能使用導航；組件若勾選「使用導航」按鈕，則不能凍結。

注3：最多只能顯示 8 個導航按鈕，超過 8 個則不顯示；導航排列順序與「body>行動端>元件順序」一致。

注4：絕對畫布塊 absolute 沒有「使用導航」功能，即 body 下的導航不支援絕對畫布塊 absolute。絕對畫布塊內的組件有「使用導航」選項，但勾選無效果 。

3.1 準備範本

點選下載範本：零售集團實時監視-phone.frm

或在 FineReport 設計器中開啟範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\industry\零售集團實時監視-phone.frm

3.2 側邊導航

1）在右側屬性面板中選中「body」，點選「行動端」，勾選「手機重佈局」。

2）點選 導航樣式 旁的「...」按鈕，選擇「側邊導航」，配置具體設定項。如下圖所示：

3.3 使用導航

1）選中報表塊「report0」，點選「行動端」，勾選「使用導航」，導航名稱為「銷售情況」，如下圖所示：

2）選中圖表塊「chart0」，點選「行動端」，勾選「使用導航」，導航名稱為「銷售額分佈」，如下圖所示：

3）選中圖表塊「chart3_c」，點選「行動端」，勾選「使用導航」按鈕，導航名稱為「資料時段分佈」，如下圖所示：

3.4 效果預覽

以 App 為例，效果預覽如下圖所示：

4.1 準備範本

同3.1節。

4.2 JS 超連結

JS 超連結的使用語句為：

_g().jumpToMark("markName")

注：「markName」可為元件名稱、表格組件名稱、圖表塊名稱、Tab-tabpane 名稱。

1）進入 report0 編輯頁面，選中 A3 儲存格，點選右側屬性面板中的「超級連結」按鈕。

2）點選「+」按鈕，選擇「JavaScript腳本」，輸入 JS 語句：

_g().jumpToMark("chart1")

3）進入「表單」編輯頁面，點選右側「組件設定」，雙擊「chart2」。

4）點選「特效>交互屬性」，點選「+」按鈕，選擇「JavaScript」，如下圖所示：

5）輸入 JS 語句：

_g().jumpToMark("chart0")

6）同樣的方法再次為 chart2 新增 JavaScript 連結，輸入 JS 語句：

_g().jumpToMark("report1")

7）分別雙擊「JavaScript1」、「JavaScript1」，重新命名為「實時銷售額」、「頂部」，如下圖所示：

4.3 使用導航

點選「組件設定」，分別選中「report1」、「chart0」、「chart1」，選擇「行動端」，勾選「使用導航」，如下圖所示：

4.4 效果預覽

以 App 為例，效果預覽如下圖所示：

注1：該方法不支援橫屏。

注2：若全螢幕放大後觸發 JS ，則跳出全螢幕跳轉到對應組件。

點選下載已完成範本：

範例一：側邊導航快速定位.frm

範例二：JS超連結快速定位.frm