JS 實現點擊按鈕跳轉到指定組件位置

1.1 問題描述

有時候決策報表的組件較多，頁面篇幅較大，而常用組件無法很快地選取，希望通過點擊按鈕可以跳轉到指定的常用組件。如下圖所示：

1.2 解決思路

通過給按鈕控件添加 JS 點擊事件，實現點擊按鈕時，可以跳轉到指定的組件。

2.1 報表設計

決策報表設計主體添加三個圖表，一個按鈕控件，圖表分别綁定好數據，如下圖所示：

2.2 添加事件

給「按鈕控件」添加一個「點擊」事件，如下圖所示：

JavaScript 代碼如下：

var a=document.getElementsByClassName('fr-titlelayout ui-state-enabled')[2];
a.setAttribute('id','Chart1');//如果圖表塊每次刷新生産的id都是不同的，那麽需要先獲取到圖表對象，然後給他設置一個固定的id再進行跳轉
document.getElementById('Chart1').scrollIntoView();//CHART1爲對應組件的id

2.3 效果預覽

保存報表，點擊PC端預覽，效果如下圖所示：

注：不支持移動端。

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\點擊按鈕跳轉到指定組件位置.frm

點擊下載模板：點擊按鈕跳轉到指定組件位置.frm