JS實現決策報表中網頁框相互刷新

1.1 問題描述

一個決策報表中使用了 A、B 兩個網頁框，兩個網頁框分别顯示 A、B 兩個不同的報表，如何在 A 網頁框中點擊 A 報表中的按鈕刷新 B 網頁框中的 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爲父模板需要刷新的網頁框控件名

或者使用如下JavaScript 代碼：

var parent = window.parent;
var iframe = parent.document.getElementById('RHIFRAME1');//RHIFRAME1是決策報表中需要刷新的網頁框名稱的大寫
iframe.contentWindow.location.reload(true);

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，選擇「分頁預覽」。在報表中點擊左邊網頁框中「按鈕控件」，右邊網頁框中報表的值發生變化。如下圖所示：

注：不支持移動端。

點擊下載模板：parent.frm     A.cpt     B.cpt