JS實現點選跳轉頁面和定時跳轉頁面

1.1 問題描述

在報表的製作中，往往會用到報表之間的跳轉甚至攜帶參數的跳轉，如下圖所示，點選一個報表塊時跳轉到另一個報表。

1.2 實現思路

使用 JS 實現跳轉

window.location = encodeURI(encodeURI("${servletURL}?viewlet=報表路徑"));

範例： 跳轉到收益分析聯動報表程式碼如下

window.location =  encodeURI(encodeURI("${servletURL}?viewlet=demo/analytics/收益分析聯動.frm"));

設定跳轉時間，開啟報表後，兩張報表實現指定時間的輪播。

2.1 準備主範本

點選下載範本：產品營收分析.frm

開啟主範本，在右側的「組件設定」中，選擇 body，為其新增「初始化後」事件。如下圖所示：

JavaScript 程式碼如下：

setTimeout(function() {
    window.location = encodeURI(encodeURI("${servletURL}?viewlet=demo/analytics/收益分析聯動.frm"));
}, 5000);//延遲5秒後跳轉到收益分析聯動報表

上述程式碼不支援行動端，行動端可將程式碼修改為：

setTimeout(function() {
    var url = encodeURI(encodeURI("${servletURL}?viewlet=demo/analytics/收益分析聯動.frm"));
    FR.doHyperlinkByGet({
        url: url,
        title: '收益分析聯動'
    });
}, 5000);//延遲5秒後跳轉到收益分析聯動報表

2.2 準備子範本

點選下載範本：收益分析聯動 .frm

開啟子範本，在右側的「組件設定」中，選擇 body，為其新增「初始化後」事件。如下圖所示：

JavaScript 程式碼如下，和主範本中新增的基本相同，只需將 URL 修改成demo/analytics/產品營收分析.frm。

setTimeout(function() {
    window.location = encodeURI(encodeURI("${servletURL}?viewlet=doc/JS/表單JS實體/19-JS實現點選跳轉頁面和定時跳轉頁面-範例一1.frm"));
}, 5000);

上述程式碼不支援行動端，行動端可將程式碼修改為：

setTimeout(function() {
    var url = encodeURI(encodeURI("${servletURL}?viewlet=demo/analytics/產品營收分析.frm"));
    FR.doHyperlinkByGet({
        url: url,
        title: '產品營收分析'
    });
}, 5000);//延遲5秒後跳轉到產品營收分析報表

2.3 效果預覽

儲存範本後，開啟主範本，報表會在 5 秒後從一個報表跳轉到另一個報表，實現自動輪播，PC 端效果如下圖所示：

行動端效果如下圖所示：

在一個報表的某個元件上新增一個「點選」事件，點選元件時跳轉到另一個報表。

3.1 準備範本

1）主範本為 產品營收分析.frm，具體所在路徑或下載範本可參考 2.1 節內容。

開啟主範本，在右側的「組件設定」中，選擇 chart0，為其新增「點選」事件。如下圖所示： 

JavaScript 程式碼如下：

window.location = encodeURI(encodeURI("${servletURL}?viewlet=demo/analytics/收益分析聯動.frm"));

點選後開啟新視窗可使用程式碼：

window.open(encodeURI(encodeURI("${servletURL}?viewlet=demo/analytics/收益分析聯動.frm")))

點選後彈窗顯示可參考 JS實現點選超連結開啟對話框報表並傳參 中程式碼。

注：上述程式碼不支援行動端，行動端可以使用圖儲存格件自帶的超級連結實現此功能，可參考：圖表超連-網路報表

2）子範本為內建範本 收益分析聯動.frm，具體所在路徑或下載範本可參考 2.2 節內容。

3.2 效果預覽

儲存範本後，開啟主範本，點選營業收入和利潤這個圖表時，會跳轉到另一個報表。效果如下圖所示：

注：不支援行動端

範例一：定時跳轉

1）報表一

點選下載範本：19-JS實現點選跳轉頁面和定時跳轉頁面-範例一1.frm

2）報表二

點選下載範本：19-JS實現點選跳轉頁面和定時跳轉頁面-範例一2.frm

範例二：點選跳轉

1）報表一

點選下載範本：19-JS實現點選跳轉頁面和定時跳轉頁面-範例二1.frm

2）報表二

點選下載範本：19-JS實現點選跳轉頁面和定時跳轉頁面-範例二2.frm