如何利用FineReport製做動態樹報表

在對數據字段進行分類管理時,利用動態樹摺疊數據是一個很好的方法,也就是點擊數據前面的加號才展開對應下面的數據,以下圖。那這樣的效果在製做報表時該如何實現呢? 下面以報表工具FineReport爲例介紹。 輸入圖片說明 思路:node

經過將模版設置爲組織樹報表,而後經過設置樹節點按鈕,最好經過數據分析預覽或者form表單預覽便可查看效果。工具

步驟:post

一、 初步創建模板設計

創建模板就至關於創建一個excel的sheet,只不過是cpt的形式。把相應的字段拖到單元格內。excel

二、 增長樹節點按鈕code

經過設置樹節點按鈕來實現摺疊樹,分別右擊單元格A一、A二、A3,選擇空間設置>按鈕,按鈕類型選擇「樹節點按鈕」,設置以下: 輸入圖片說明 一、 保存與預覽orm

保存模板,點擊設計器中的數據分析,在網頁上的預覽效果即如上述所示。事件

動態效果展現:圖片

用戶設置了摺疊樹按鈕後,預覽報表時沒有動態樹效果,多是預覽模式錯誤。ci

咱們是經過按鈕控件實現該功能的,而普通的分頁預覽是不會將控件顯示出來,以下圖所示: 輸入圖片說明 所以須要在op=view狀態即數據分析下才能預覽顯示出效果。

摺疊樹延伸

須要在雙向摺疊樹中顯示對應的圖表,以便查看,以下圖所示: 輸入圖片說明 具體步驟以下所示:

一、創建雙向摺疊樹:

首先創建一個雙向摺疊樹,雙向摺疊樹須要注意摺疊樹數據列不可位於同一行或者贊成列

二、設定節點點擊事件

爲了實現雙向摺疊樹與圖標的交互,須要設置樹節點的點擊事件,經過點擊事件將樹節點的值做爲參數傳遞給圖表。

下面以效果圖中食品節點爲例來講明控件點擊事件的設置。

食品節點事件效果圖以下所示 輸入圖片說明 treenode_lb1()方法做用是傳參,內容是:

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中還有個方法是關聯tree.cpt和tree_chart.cpt兩個文檔,內容是:

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');
}

三、 圖表模板的引入

圖表模板經過樹模板中的一個網頁框控件引入,屬性以下,關聯tree_chart.cpt 輸入圖片說明 上圖中,控件名爲空,即默認是iframe,若是設置控件名,則必須與最後一個方法中的名字對應

四、圖表模版的設置

圖表模板中,須要設置根據樹節點傳參的條件設置。

綜上能夠看出,動態摺疊樹的設計思路是點擊主格時,控制附屬於該組的子項內容展開與摺疊,由此到達數據分析的效果。

相關文章
相關標籤/搜索