JS實現點選超連結開啟對話框報表並傳參

1.1 問題描述

有時一些特殊場景，當內建「超連結>對話框」開啟報表不能滿足要求時，如點選按鈕實現超連結跳轉，就可以透過自訂 JS 實現對話框開啟報表，如下圖所示：

.

1.2 實現思路

使用 FR 內建 JS 方法 showDialog 或 doHyperlinkByPost 或 doHyperlinkByGet 開啟報表。

2.1 設計報表

建立範本，B2 儲存格輸入文字開啟報表，如下圖所示：

2.2 新增 JS 代碼

選中 B2 儲存格，新增一個「超級連結>JavaScript腳本」，如下圖所示：

使用 showDialog 代碼如下：

注1：代碼中範本路徑請根據實際範本所在位置調整，對話框的高度和寬度也可以調整，見代碼註釋，參數的名稱需要與開啟的範本參數名稱一致。

注2：若對話框中使用 視頻播放元件插件 播放視頻，範本預覽後，會出現關閉對話框視頻仍然播放的情況，11.0.2 及之後版本，下面代碼 destroyOnClose:true 可解決該問題。

//範本路徑
var url = encodeURI(encodeURI("/webroot/decision/view/report?viewlet=GettingStartedTW.cpt&op=view&地區=華北"));
//窗體
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
//將窗體的src屬性設定為範本路徑
$iframe.attr("src", url);
//窗體的屬性
var o = {
    title: "對話框",    //標題
    destroyOnClose:true,   // 是否在關閉對話框的時候將對話框從dom中移除
    width: 680,         //寬度
    height: 640,        //高度
    //closable:true,    //是否顯示關閉按鈕，預設true，僅支援cpt普通報表
    //confirm:true,     //是否新增確認取消按鈕,預設false，僅支援cpt普通報表
    //draggable:true   //是否可拖動，預設true
};
//彈出窗體
FR.showDialog(o.title, o.width, o.height, $iframe, o);

內建 JS 方法 showDialog 實現對話框開啟超連結時，對話框樣式是可以修改的，只要在代碼後面加上修改樣式的代碼即可。

注：以下修改對話框樣式代碼僅支援普通報表，若需要在決策報表使用，需要使用F12獲取對應的元素修改代碼。

1）標題置中

$('.fr-core-window-header ').css("text-align", "center");

2）修改標題背景色

$('.fr-core-window-header ').css("background","red");

3）隱藏對話框右上角關閉視窗按鈕

$('.fr-core-panel-tool-close').hide();

4）去掉對話框標題文字

$('.fr-core-panel-title').hide();

5）修改對話框標題文字顏色

$('.fr-core-panel-title').css("color","blue")

6）對話框頂部圓角修改成直角

$('.fr-core-window').css("border-radius", "0 0 0 0");
$('.fr-core-window-header').css("border-radius", "0 0 0 0")

2.3 效果預覽

儲存報表，效果如 1.1 節所示

注：不支援行動端

3.1 設計報表

與 2.1 節相同。

3.2 新增代碼

選中 B2 儲存格，新增一個「超級連結>JavaScript腳本」，如下圖所示：

使用 doHyperlinkByPost 代碼如下：

FR.doHyperlinkByPost({
//報表路徑
"url":"/webroot/decision/view/report?viewlet=%252FGettingStartedTW.cpt",    //參數
"para":{
"__pi__":true,    //是否顯示參數面板
"地區":"華北"
		},
"target":"_dialog",    //對話框方式開啟
"feature":{
"width":600,
"height":400,
"isCenter":true,     //是否置中顯示
"title":"標題"
		}
	})

3.3 效果預覽

儲存報表，點選「分頁預覽」，效果如 1.1 節所示：

注：不支援行動端

4.1 設計報表

與 2.1 節相同。

4.2 新增代碼

選中 B2 儲存格，新增一個「超級連結>JavaScript腳本」，如下圖所示：

使用 doHyperlinkByGet 代碼如下：

FR.doHyperlinkByGet({
//報表路徑
"url":"/webroot/decision/view/report?viewlet=%252FGettingStarted.cpt",    //參數
"para":{
"__pi__":true,    //是否顯示參數面板
"地區":"華北"
		},
"target":"_dialog",    //對話框方式開啟
"feature":{
"width":600,
"height":400,
"isCenter":true,     //是否置中顯示
"title":"標題"
		}
	})

4.3 效果預覽

儲存報表，點選「分頁預覽」，效果如 1.1 節所示

點選下載範本：示例1.cpt示例2.cpt示例3.cpt