JS實現決策報表中網頁框重新整理

1.1 問題描述

當使用網頁框在一張報表中展示兩塊內容時，希望點選其中一塊內容的某個地方觸發重新整理另一塊內容，如其中一個網頁框嵌入了其他網站的學習教程，需要重新整理。

如下圖所示，當決策報表中使用了 A、B 兩個網頁框，兩個網頁框分別對應 A、B 報表，如何實現點選 A 報表中的按鈕重新整理 B 報表呢？

左邊為 A 報表，右邊為 B 報表：

1.2 實現思路

注：使用此方法前要先安裝「網頁框元件」插件，具體可參考文檔：在決策報表中使用網頁框元件 。

透過新增事件實現，使用 window.parent 獲取到父範本的網頁框，使用網頁框元件的 reload() 方法重新整理網頁框。

2.1 準備子範本

準備兩個子範本，分別對應主範本的兩個「網頁框元件」。

2.1.1 子範本A 

1）建立一個普通報表 A.cpt，選中 A1 儲存格，在右側「組件設定」中，選擇「按鈕元件」，並設定按鈕名字為：重新整理父範本網頁框 B，如下圖所示：

2）選擇 A1 儲存格「按鈕元件」，為其新增一個「點擊」事件。如下圖所示：

JavaScript 代碼如下：

注：代碼中會指明需要重新整理的父範本中的網頁框元件，父範本中網頁框元件的設定可參考後面父範本的設定。

window.parent._g().getWidgetByName('rHIframe1').reload(); //rHIframe1為父範本需要重新整理的網頁框元件名

3）保存子範本 A.cpt。

2.1.2 子範本B

1）建立一個普通報表 B.cpt，在 A1 儲存格插入公式：ROUND5(RAND() * 50,0)。如下圖所示：

2）保存子範本 B.cpt。

2.2 準備父範本

1）建立一個決策報表 parent.frm，在 body 中拖入兩個「網頁框元件」。如下圖所示：

2）選中 rHIframe0 網頁框，設定位址和參數，在「範本路徑」下選擇 A.cpt，並新增參數 op，參數值為：write。如下圖所示：

3）選中 rHIframe1 網頁框，設定位址和參數，在「範本路徑」下選擇 B.cpt。如下圖所示：

4）保存父範本 parent.frm。

2.3 效果預覽

開啟父範本 parent.frm，選擇「PC端預覽」。在報表中點選左邊網頁框中「按鈕元件」，右邊網頁框中報表的值發生變化。如下圖所示：

注：不支援行動端。

點選下載範本：parent.frm   A.cpt    B.cpt