JS實現鑽取到子頁面進行填報

1.1 預期效果

製作填報報表時，希望主範本只用來查看主要資料或基礎資訊，透過 超級連結-網路報表 的形式到子範本「預覽」或「編輯」詳細內容，預期效果如下：

1.2 實現思路

在主範本中設定「複選按鈕元件」和「按鈕元件」，在「按鈕元件」中新增「點選」事件。

使用 JavaScript 獲取被勾選的複選框對應的「僱員ID」作為動態參數，使用 FR.doHyperlinkByGet 超連結方法傳遞動態參數並開啟相應子範本。

範例中要使用的子範本是在%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\自由填報報表.cpt 的基礎上修改的，詳情可參考：自由報表填報

故範例中主範本的資料來源也為「僱員」表（也可為其他資料表，但表間需有聯動欄位。）

2.1 設計主範本

2.1.1 資料準備

建立普通報表，建立資料庫查詢 ds1，SQL 查詢語句為：SELECT * FROM 僱員。

2.1.2 設計報表

1）將資料集中幾個最基本的資訊欄位拖入表格，設計表格樣式如下圖所示：

2）在「僱員ID」和「姓名」中間插入 4 列，表格樣式如下圖所示：

儲存格具體設定如下表：

注：C3、E3 儲存格的 IF 公式表示當「複選按鈕」選中時，傳回對應的「僱員ID」，否則傳回空。C2、E2 儲存格的公式表示獲取傳回的 C3、E3 儲存格的值。

3）隱藏 C 列、E 列。

2.1.3 按鈕元件設定

1）設定 B2、D2 儲存格的按鈕元件名稱分別為「預覽」和「編輯」，也可自訂按鈕圖示。如下圖所示：

2）給 B2 按鈕新增一個「點選」事件，輸入 JavaScript 程式碼如下：

var v1=_g().getCellValue(0,2,1);
var url="${servletURL}?reportlet=/doc/Form/MultiFormReport/員工資訊登記表.cpt";
FR.doHyperlinkByGet(url,{A:v1},'REPORT','_dialog');

注：參數 A 為子範本資料集中定義的參數。

3）同理給 D2 儲存格新增一個「點選」事件，其 JavaScript 程式碼如下所示：

var v1=_g().getCellValue(0,4,1);
var url= "${servletURL}?reportlet=/doc/Form/MultiFormReport/員工資訊登記表.cpt&op=write&__cutpage__=v";
FR.doHyperlinkByGet(url,{A:v1},'REPORT','_dialog');

注：子範本路徑後的 &op=write 表示是「填報預覽」，&__cutpage__=v 表示填報預覽時分頁顯示。

2.1.4 填報頁面設定

當主範本只用來預覽，鑽取子範本時，可以將「範本>範本 Web 屬性>填報頁面設定」修改為「為該範本單獨設定」，然後取消勾選「未提交離開提示」。

2.1.5 儲存報表

將報表另存為：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\MultiFormReport\員工基礎資訊表.cpt

2.2 設計子範本

2.2.1 準備範本

開啟內建範本 %FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\自由填報報表.cpt

或點選下載範本：自由填报报表.cpt

2.2.2 資料準備

將資料庫查詢語句修改為：SELECT * FROM 僱員 where 僱員ID in ('${replace(A,",","','")}') 。如下圖所示：

注：這裏的參數 A 對應主範本 JavaScript 程式碼中的參數 A。

2.2.3 報表設計

將第一行空白行刪除，選中除了「僱員ID」儲存格以外所有有資料的儲存格，將它們的「左父格」設定為「僱員ID」所在儲存格 C3。如下圖所示：

2.2.4 設定分頁

設定分頁後，在點選「預覽」或「編輯」按鈕開啟的新頁面中，子範本將以分頁的形式展示。

選中 B1 儲存格，設定「儲存格屬性>其他>分頁」為「列前分頁」即可。

2.2.5 儲存報表

將報表另存為：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\MultiFormReport\員工資訊登記表.cpt

注：子範本路徑需與主範本 JavaScript 程式碼中所寫路徑保持一致。

2.3 效果預覽

2.3.1 PC 端

在主範本「員工基礎資訊表」中點選「填報預覽」，效果與 1.1 節預期效果一致。

注：不支援 IE 瀏覽器。

2.3.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

已完成範本可參見：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\MultiFormReport\員工基礎資訊表.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\MultiFormReport\員工資訊登記表.cpt

點選下載範本：

员工基础信息表.cpt

员工信息登记表.cpt