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

1.1 問題描述

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

1.2 實現思路

使用 JS 實現跳轉

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

示例： window.location =  encodeURI(encodeURI("${servletURL}?viewlet=demo/analytics/收益分析聯動.frm")); 跳轉到收益分析聯動報表。

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

2.1 準備主模板

準備内置模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\analytics\産品營收分析.frm 作爲主模板。

點擊下載模板：産品營收分析.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 準備子模板

準備内置模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\analytics\收益分析聯動.frm 作爲子模板。

點擊下載模板：收益分析聯動.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"));

注：上述代碼不支持移動端，移動端可以使用圖表控件自帶的超級鏈接實現此功能，可參考：[新]圖表鑽取到網絡報表

2）子模板爲内置模板 收益分析聯動.frm，具體所在路徑或下載模板可參考 2.2 節内容。

3.2 效果預覽

保存模板後，打開主模板，點擊營業收入和利潤這個圖表時，會跳轉到另一個報表。效果如下圖所示：

注：不支持移動端

示例一：定時跳轉

1）報表一

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\19-JS實現點擊跳轉頁面和定時跳轉頁面-示例一1.frm

點擊下載模板：19-JS實現點擊跳轉頁面和定時跳轉頁面-示例一1.frm

2）報表二

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\19-JS實現點擊跳轉頁面和定時跳轉頁面-示例一2.frm

點擊下載模板：19-JS實現點擊跳轉頁面和定時跳轉頁面-示例一2.frm

示例二：點擊跳轉

1）報表一

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\19-JS實現點擊跳轉頁面和定時跳轉頁面-示例二1.frm

點擊下載模板：19-JS實現點擊跳轉頁面和定時跳轉頁面-示例二1.frm

2）報表二

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\19-JS實現點擊跳轉頁面和定時跳轉頁面-示例二2.frm

點擊下載模板：

19-JS實現點擊跳轉頁面和定時跳轉頁面-示例二2.frm