1. 概述
1.1 預期效果
在設計報表時，希望實現點選左邊檢視表樹節點，右邊動態顯示該節點對應的報表內容，預期效果如下圖所示：
1.2 實現思路
分別製作兩張範本，報表 A 和報表 B。報表 A 分為左右兩個部分，左邊新增「檢視表樹元件」定義檢視表樹，右邊新增「網頁框元件」顯示報表 B。
給「檢視表樹」元件新增「點選事件」，將選擇的值傳遞給「網頁框元件」中的報表 B。
2. 範例
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 實現傳參即可。
如下圖所示：
具體可見附件範本。
3. 範本下載
4. 注意事項
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 中所示的分離字元（比如 ¶）時，會導致最終發出的 URL 連結編碼異常，進而報錯。
解決方案
sql() 函式中定義參數時避開上述連結中的分離字元即可，如本文範例定義的參數為 p。
4.2 IE核心瀏覽器無法展開樹列表
問題描述
在IE核心瀏覽器，例如edge遊覽器中，預覽決策報表中的檢視表樹時，無法展示樹列表。
解決方案
1）更換瀏覽器，推薦使用最新版Chrome瀏覽器進行預覽。
2）將決策報表轉換至舊版。
