JS實現點選按鈕開啟對話框報表

1.1 預期效果

如何實現在 iframe 中嵌入報表？效果如下圖所示：

1.2 實現思路

給按鈕元件新增點選事件，新增 iframe 彈框並在其中嵌入範本，使用 remoteServletURL 獲取範本路徑。

2.1 新增按鈕元件

建立普通報表，在右側屬性面板中點選元件設定，新增按鈕元件，按鈕名稱為點選彈框。如下圖所示：

2.2 新增點選事件

選中按鈕元件，在右側屬性面板中點選元件設定>事件，新增點選事件，點選按鈕可在彈窗中預覽「GettingStarted.cpt」範本。

新增參數 cc，值用公式表示為remoteServletURL，用來獲取範本路徑。如下圖所示：

JavaScript 程式碼如下所示：

注：src 後綴要根據URL修改，跳轉到決策報表時可以修改為?viewlet=範本名稱.frm

var iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='yes' framedorder='0'>");
// 對話框內 iframe 參數的命名，預設寬高佔比是 100%，可向下捲動
iframe.attr("src", cc+"?reportlet=GettingStartedTW.cpt");
// 給 iframe 新增 src 屬性
var o = {
width : 700,//對話框寬度  
height: 500//對話框高度
};
FR.showDialog("新增", o.width, o.height, iframe,o);//彈出對話框

若開啟的範本在 %FR_HOME%\webapps\webroot\WEB-INF\reportlets 資料夾的子資料夾中，程式碼可這樣修改：

iframe.attr("src", cc+"?reportlet=demo/analytics/financial/EVA經濟附加值模型.cpt");

2.3 效果預覽

儲存報表，點選填報預覽，效果如本文 1.1 節預期效果 所示。

注：不支援行動端。

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\\doc\Form\WidgetExample\iframe中嵌入報表.cpt

點選下載範本：iframe中嵌入报表.cpt