JS實現切換Tab塊時進行數據聯動

1.1 問題描述

決策報表中，Tab 塊輪播切換時，實現報表塊中數據聯動。如下圖所示：

1.2 解決思路

JS 獲取每個Tab 塊的輪播标題索引，轉換爲參數值進行界面傳參，實現聯動效果。

2.1 準備數據

新建模板，新建數據集 ds1,SQL 語句爲：

select AREA, NUM from (

select '江蘇省' AS AREA,1235 AS NUM union all 

select '山東省' AS AREA,2290  AS NUM union all 

select '浙江省' AS AREA,1254  AS NUM 

)t where 1=1 and AREA= '${xq}'

，SQL語句中定義了一個參數 xq，輸入默認值「江蘇省」。如下圖所示：

2.2 設計模板

1）在決策報表 body 中添加一個 Tab 塊和報表塊。每個 Tab 塊中添加一個地圖塊，GIS 圖層選擇黑色，地圖邊界分别爲江蘇省、山東省、浙江省。如下圖所示：

2）設置 2 秒輪播，隐藏Tab 塊标題。如下圖所示：

3）在報表塊 report0 單元格中拽入 ds1 的數據列，設計報表樣式，如下圖所示：

給報表塊添加灰黑色背景，白色邊框。

4）在 body 中添加一個「下拉框控件」，控件名稱爲 xq ,配合 JS 和數據集傳參使用，設置狀态爲「不可見」。如下圖所示：

2.3 添加事件

點擊 Tab 塊，在 tabpane1上添加一個「Tab塊切換」事件。如下圖所示：

JavaScript 代碼如下：

	setTimeout(function() { 
	//TAB切換後,獲取到當前TAB塊的标題索引
	FR.IndexNum = _g().getWidgetByName("tabpane1").getShowIndex();
	var a = 0;
	a = FR.IndexNum;
	if(a==0){
		x='江蘇省';
		}
    else if(a==1){
    	     x='山東省';
    	}
    else if(a==2){
    	     x='浙江省';
    	}  	
    var cc = _g().getWidgetByName("xq")
	cc.setValue(x);	

}, 50);

顯示代碼

2.4 效果預覽

2.4.1 PC 端

保存模板，點擊「PC端預覽」，效果如下圖所示：

2.4.2 移動端

App 及 HTML5 效果如下圖所示：

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\JS實現切換Tab塊時進行數據聯動.frm

點擊可下載模板：JS實現切換Tab塊時進行數據聯動.frm