下拉框元件實現跳轉到指定行數

1.1 版本

1.2 預期效果

有時候報表資料量大、不分頁顯示，查看靠後的資料非常麻煩。希望能透過指定的數字快速定位到對應的行數，如下圖所示：

1.3 實現思路

透過使用 HTML 的錨點連結，實現定位到對應 ID 的元素。

2.1 資料準備

點選設計器左上角「檔案>建立普通報表」，建立資料庫查詢 ds1，SQL 語句為：SELECT * FROM 人員花名冊 limit 200。如下圖所示：

2.2 設計報表

2.2.1 表格基本設定

1）A1 儲存格輸入正文「跳轉到」，B1 儲存格新增「下拉框元件」，C1 儲存格輸入正文「行」；

2）A2 儲存格輸入序號，B2~F2 儲存格輸入與資料集中欄位想對應的標題；

3）將資料集中對應欄位拖入 B2~F2 儲存格。

如下圖所示：

2.2.2 設定序號儲存格屬性

1）選中 A3 儲存格，點選「儲存格元素>插入公式」，插入公式：=seq()。

公式說明：seq() 函式回傳值為數值，是指在整個報表執行程式中，傳回該函式被第幾次執行。詳情請參見 序號 。

如下圖所示：

2）選中 A3 儲存格，點選「儲存格屬性>擴展」，設定左父格為 B3 儲存格，根據 B3 執行公式。如下圖所示：

3）選中 A3 儲存格，點選「儲存格屬性>形態」，設定為「公式形態」：="<span id='"+$$$+"'>"+$$$+"</span>"，透過公式定義 HTML 標籤，後面透過 JS 定位跳轉到對應的數字位置。

注：因為本例的實現方法是用 HTML 的錨點連結定位元素，所以這裏要改為 HTML 的公式形態。

4）選中 A3 儲存格，點選「儲存格屬性>其他>進階」，選擇「用HTML顯示內容」。如下圖所示：

2.2.3 設定下拉框元件

1）選中 B1 儲存格，點選右側屬性面板「元件設定」，選擇「下拉框元件」，設定資料字典類型為「公式」，實際值為=RANGE(200)。

公式說明：range(200) 可生成 1 到 200 的整數序列，詳情可參見文檔 Range函式 。

步驟如下圖所示：

2）給元件新增一個「編輯後事件」，事件內容為跳轉到元件輸入序號所在的頁面位置。如下圖所示：

 JavaScript 程式碼如下：

location.href = "#"+this.value;

2.2.4 設定首行凍結

點選「範本>重複與凍結設定」，設定第 1 行重複與凍結，這樣點選跳轉到其他行時，第一行不會被頂上去，便於再次點選跳轉。

2.3 效果預覽

2.3.1 PC 端

儲存範本，點選「填報預覽」，效果如 1.1節預期效果 所示。

2.3.2 行動端

已完成範本請參見：%FR_HOME%webappswebrootWEB-INF eportletsdocPrimaryDetailReport點選跳轉到指定行.cpt