檢視表樹聯動查詢網頁框內報表

1.1 預期效果

在設計報表時，希望實現點選左邊檢視表樹節點，右邊動態顯示該節點對應的報表內容，預期效果如下圖所示：

1.2 實現思路

分別製作兩張範本，報表 A 和報表 B。報表 A 分為左右兩個部分，左邊新增「檢視表樹元件」定義檢視表樹，右邊新增「網頁框元件」顯示報表 B。

給「檢視表樹」元件新增「點選事件」，將選擇的值傳遞給「網頁框元件」中的報表 B。

2.1 製作報表B 

可直接開啟已經製作完成的範本：%FR_HOME%\webroot\WEB-INF\reportlets\doctw\Primary\widgetReport\檢視表樹報表B.cpt

2.1.1 準備資料

建立普通報表，建立內建資料集，表設計如下圖所示：

2.1.2 表格設計

將欄位拖入儲存格，輸入對應的標題，表格樣式如下圖所示：

2.1.3 新增過濾

雙擊 A2 儲存格，給 A2 增加過濾條件，選擇資料列「職務」等於公式：sql("FRDemoTW", "select 部門名稱 from 公司部門 where 部門ID='" + p + "'", 1)，這裏主要是過濾對應職務的資料，後面檢視表樹將會傳遞一個參數 p 給網頁框，網頁框中報表利用 p 過濾資料。

2.2 製作報表A

2.2.1 準備資料

建立普通報表，建立資料庫查詢 ds1，SQL 查詢語句為：SELECT * FROM  公司部門。

2.2.2 表格設計

將表格分成兩部分，左邊放檢視表樹，右邊放網頁框，如下圖所示：

2.2.3 檢視表樹元件設定

 1）在表格左邊框新增一個「檢視表樹元件」，並構建樹，構建方式選擇「自動構建」，步驟如下圖所示：

注：具體方法請參考文檔 下拉樹元件自動構建範例。

2）設定元件屬性：不勾選「多選」，設定檢視表樹類型為單選檢視表樹。勾選「只傳回葉子節點」，不勾選「結果傳回完整層次路徑」，使其傳回資料為當前選中資料，而不是層次路徑。如下圖所示：

3）點選事件設定

給檢視表樹新增點選事件，輸入 JavaScript 程式碼如下：

注：若報表工程安裝了「平台內開啟新標籤頁插件」，建議使用 FR.doHyperlinkByPost 傳參，否則點選後會跳轉到新的視窗開啟網頁框報表。

var b = this.getValue();
var url = encodeURI(encodeURI("${servletURL}?viewlet=doctw/Primary/widgetReport/檢視表樹報表B.cpt&__showtoolbar__=false"));
//超連結到 cpt 普通報表或複合式報表時需連結上 &__showtoolbar__=false
FR.doHyperlinkByGet(url, {p: b}, 'REPORT');// REPORT 就是網頁框的元件名，在 doHyperlinkByGet 方法中必須大寫

注：檢視表樹傳回的值類型為陣列。

步驟如下圖所示：

2.2.4 網頁框元件設定

在表格右邊框新增一個「網頁框元件」，元件名稱必須和上述 JS 程式碼中一致，為「report」。

在地址欄輸入：${servletURL}?viewlet=doctw/Primary/widgetReport/檢視表樹報表B.cpt&__showtoolbar__=false。若初始時表格右邊框內不需要顯示表格，地址欄也可以不輸入。

注：IE 瀏覽器下地址欄輸入 URL 中「doctw/Primary/widgetReport/檢視表樹報表B.cpt」部分需為預覽時 viewlet 後帶參數的部分。

2.3 效果預覽

2.3.1 PC端

儲存兩張報表，在報表 A 中點選「資料分析」或「填報預覽」，效果同 1.1 節預期效果一致。

2.3.2 行動端

App 及 HTML5 效果如下圖所示：

2.4 範例擴展

2.4.1 檢視表樹多選時如何實現

當檢視表樹元件多選時，檢視表樹需勾選「多選」和「結果傳回層次路徑」。「網頁框」對應的報表中資料集 SQL 內容也隨之變化，透過replace（）公式和 treelayer（）公式將檢視表樹傳遞的參數拆分開，最後過濾出資料。如下圖所示：

2.4.2 決策報表中如何實現

上述範例方法在決策報表中同樣適用，設計決策報表時，直接將元件拖入 body 進行設定，但需要先安裝 網頁框元件插件，具體可參考文檔 在決策報表中使用網頁框元件 。如下圖所示：

其他步驟完全相同。具體可見附件範本。

其他步驟完全相同。具體可見附件範本。

2.4.3 FVS 範本中如何實現

在 FVS 範本中，無需 JS 實現，直接使用 FVS 網頁框組件 的參數設定功能即可實現。

1）設計 FVS 範本時，點選或拖曳組件區「元件>檢視表樹」和「容器>網頁框」，將組件新增到畫布中。

2）檢視表樹 設定時，不需要新增點選事件，需要將「元件名稱」改為與「參數名稱」一致，本範例中為 p 。即檢視表樹的值，即為參數 p 的值。

3）網頁框 設定時，選擇對應的範本，在參數設定處新增子範本需要的參數 p ，獲取檢視表樹的動態參數值 $p 實現傳參即可。

如下圖所示：

具體可見附件範本。

已完成範本可參見：

檢視表樹報表A.cpt

檢視表樹報表B.cpt

檢視表樹超連結-決策報表.frm

檢視表樹多選報表A.cpt

檢視表樹多選報表B.cpt

檢視表樹超鏈-FVS.fvs

4.1 IE瀏覽器點選樹節點報錯

問題描述

在 IE 瀏覽器下，點選樹節點有時會出現如下報錯：

原因分析

製作報表 B 時，新增的過濾條件中使用 sql() 函式定義的參數為 para，範本中 JS 程式碼則包含 FR.doHyperlinkByGet(url, {para: b}, 'REPORT')。

使用 IE 瀏覽器提供的 API 去開啟設計器範本中 JS 程式碼裏的 URL 時，若 URL 中含有如連結 https://tool.oschina.net/commons?type=2 中所示的分離字元（比如 &para）時，會導致最終發出的 URL 連結編碼異常，進而報錯。

解決方案

sql() 函式中定義參數時避開上述連結中的分離字元即可，如本文範例定義的參數為 p。

4.2 IE核心瀏覽器無法展開樹列表

問題描述

在IE核心瀏覽器，例如edge遊覽器中，預覽決策報表中的檢視表樹時，無法展示樹列表。

解決方案

1）更換瀏覽器，推薦使用最新版Chrome瀏覽器進行預覽。

2）將決策報表轉換至舊版。