JS實現關閉子頁面時重新整理父頁面

1.1 問題描述

在實際專案中做填報時，會遇到點選按鈕跳轉到子頁面填寫詳細資訊。當填報完成，關閉子頁面時，希望能重新整理父頁面。要如何設定才能實現呢？

注：360 瀏覽器極速範本不支援該效果。

1.2 實現思路

主範本中新增「超連結」到子範本，子範本中新增「載入結束」事件，事件內容為關閉子頁面，重新整理父頁面。

事件 JS 中用 this.opener.location.reload() 重新整理父頁面，onunload 在使用者退出頁面時觸發事件。

2.1 準備子範本

1）建立範本，設計報表樣式，在 B1-B5 儲存格中新增「文字元件」，如下圖所示：

2）設定報表填報屬性，點選「範本>報表填報屬性」，新增一個「內建SQL」提交方式，如下圖所示：

3）為子範本新增事件，實現關閉報表頁面後重新整理父報表，點選「範本>範本 Web 屬性>填報頁面設定」，選擇「為該範本單獨設定」，在「事件設定」處，新增一個「載入結束」事件。如下圖所示：

JavaScript 代碼如下：

window.onunload = function() {
this.opener.location.reload();
//父頁面重新整理
}

this.opener傳回的是父頁面物件，等同于在父頁面執行相關方法。比如想要給父頁面參數面板上的元件A賦值，則 JS 為：this.opener._g().parameterEl.getWidgetByName("A").setValue()

如果希望重新整理父頁面時，保留參數面板所選的元件值，則需要使用以下 JavaScript 代碼：

window.onunload = function() {
      this.opener._g().parameterCommit();
        //父頁面重新查詢
}

4）儲存子範本，注意範本名稱和路徑，後面主範本超連結中將會用到。

2.2 準備主範本

1）建立範本，新增 ds1 資料集，SQL 語句為：SELECT * FROM userinfo

2）設計報表樣式，如下圖所示：

3）合併 A1-E1 儲存格後，新增超連結，超連結選擇「網路報表」，報表選擇子範本，在下方參數區域新增參數 op，值為write，參數作用為：子範本以填報方式開啟，如下圖所示：

2.3 預覽效果

保存主範本，選擇「填報預覽」，效果如下圖所示：

注：不支援行動端，行動端想實現此效果可參考：[App]填報成功關閉當前頁面並重新整理父頁面

主範本

點選下載範本：13-JS實現關閉子視窗時重新整理父視窗(父).cpt

子範本

點選下載範本：13-JS實現關閉子視窗時重新整理父視窗(子).cpt