wuxiren123

思路：

通過將模版設(shè)置為組織樹報表，然后通過設(shè)置樹節(jié)點按鈕，最好通過數(shù)據(jù)分析預(yù)覽或者form表單預(yù)覽即可查看效果。

步驟：

1、  初步建立模板

 建立模板就相當(dāng)于建立一個excel的sheet,只不過是cpt的形式。把相應(yīng)的字段拖到單元格內(nèi)。

2、  增加樹節(jié)點按鈕

 通過設(shè)置樹節(jié)點按鈕來實現(xiàn)折疊樹，分別右擊單元格A1、A2、A3，選擇空間設(shè)置>按鈕，按鈕類型選擇“樹節(jié)點按鈕”，設(shè)置如下：

1、  保存與預(yù)覽

保存模板，點擊設(shè)計器中的數(shù)據(jù)分析，在網(wǎng)頁上的預(yù)覽效果即如上述所示。

動態(tài)效果展示：

用戶設(shè)置了折疊樹按鈕后，預(yù)覽報表時沒有動態(tài)樹效果，可能是預(yù)覽模式錯誤。

我們是通過按鈕控件實現(xiàn)該功能的，而普通的分頁預(yù)覽是不會將控件顯示出來，如下圖所示：

因此需要在op=view狀態(tài)即數(shù)據(jù)分析下才能預(yù)覽顯示出效果。

折疊樹延伸

需要在雙向折疊樹中顯示對應(yīng)的圖表，以便查看，如下圖所示：

具體步驟如下所示：

1、建立雙向折疊樹：

首先建立一個雙向折疊樹，雙向折疊樹需要注意折疊樹數(shù)據(jù)列不可位于同一行或者同意列

2、設(shè)定節(jié)點點擊事件

為了實現(xiàn)雙向折疊樹與圖標(biāo)的交互，需要設(shè)置樹節(jié)點的點擊事件，通過點擊事件將樹節(jié)點的值作為參數(shù)傳遞給圖表。

下面以效果圖中食品節(jié)點為例來說明控件點擊事件的設(shè)置。

食品節(jié)點事件效果圖如下所示

treenode_lb1()方法作用是傳參，內(nèi)容是：

function treenode_lb1(treenode, cv) {
    if (treenode.selected()) {
    if (!window.fr_lb1_param){
          window.fr_lb1_param = {};
       }
       window.fr_lb1_param[cv] = cv;
    } else {
      window.fr_lb1_param[cv] = null;
    }
    postParam();
}

demo.js中還有個方法是關(guān)聯(lián)tree.cpt和tree_chart.cpt兩個文檔，內(nèi)容是：

FR.doHyperlinkByPost('ReportServer?reportlet=demo/analytics/tree/tree_chart.cpt', {diqu:diqu_str,city:city_str,lb1:lb1_str,lb2:lb2_str,lx1:lx1_str,lx2:lx2_str},'iframe');
}

3、  圖表模板的引入

圖表模板通過樹模板中的一個網(wǎng)頁框控件引入，屬性如下，關(guān)聯(lián)tree_chart.cpt

上圖中，控件名為空，即默認是iframe，如果設(shè)置控件名，則必須與最后一個方法中的名字對應(yīng)

4、圖表模版的設(shè)置

圖表模板中，需要設(shè)置根據(jù)樹節(jié)點傳參的條件設(shè)置。

綜上可以看出，動態(tài)折疊樹的設(shè)計思路是點擊主格時，控制附屬于該組的子項內(nèi)容展開與折疊，由此到達數(shù)據(jù)分析的效果。