JS 實現點擊按鈕實現超鏈接功能

1.1 問題描述

在決策報表中，用戶通過點擊按鈕給報表中報表塊或圖表塊傳遞參數，類似於在普通報表單元格中添加「超鏈接>動态參數」實現的效果。如下圖所示：

1.2 實現思路

給按鈕添加「點擊」事件，通過點擊事件将參數值傳遞給對應的報表塊或圖表塊。可以通過改變報表的參數值，即動态參數的思路實現，也可以不改變報表的參數值，給對應的報表塊或圖表塊傳遞參數值。

通過 JS，直接改變報表中相關參數的參數值，報表畫面呈現參數值對應的内容。

2.1 準備數據集

新建一個決策報表，新建數據集 ds1，SQL語句爲：SELECT * FROM 銷量 where 地區='${area}'，其中有一個數據集參數 area ，如下圖所示：

2.2 設計報表

1）在 body 中添加兩個「按鈕控件」和一個報表塊，「按鈕控件」名稱分别爲華東、華北，如下圖所示：

2）将 ds1 數據集字段拖入報表塊單元格中，設計單元格樣式，如下圖所示：

最終 body 布局如下圖所示：

2.3 添加點擊事件

1）選中華東「按鈕控件」button0，爲其添加一個「點擊」事件，事件需要添加兩個參數。如下圖所示：

參數值如下表所示：

JavaScript 代碼如下：

//給參數area賦值，向服務器調取數據的時候，實現調取部分數據的刷新
$.ajax({
	url: '/webroot/decision/view/form?op=fr_dialog&cmd=parameters_d',
	type: 'POST',
	data: {
		"area": area //給area參數賦值
	},
	headers: {
		sessionID: session
	},
	complete: function(res, status) {
		if (window.FR && FR.Chart && FR.Chart.WebUtils) {
			FR.Chart.WebUtils.clearCharts();//清除圖表内容
		}
		_g().loadContentPane();//加載報表内容
	}
});
顯示代碼

2）同樣的方法，爲華北「按鈕控件」添加「點擊」事件。如下圖所示：

參數值如下表所示：

JavaScript 代碼如下：

//給參數area賦值，向服務器調取數據的時候，實現調取部分數據的刷新
$.ajax({
	url: '/webroot/decision/view/form?op=fr_dialog&cmd=parameters_d',
	type: 'POST',
	data: {
		"area": area //給area參數賦值
	},
	headers: {
		sessionID: session
	},
	complete: function(res, status) {
		if (window.FR && FR.Chart && FR.Chart.WebUtils) {
			FR.Chart.WebUtils.clearCharts();//清除圖表内容
		}
		_g().loadContentPane();//加載報表内容
	}
});
顯示代碼

2.4 效果預覽

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

注：不支持移動端。

不改變報表的參數值，通過JS，給對應的報表塊或圖表塊傳遞參數值。

3.1 準備數據集

新建一個決策報表，新建數據集 ds1，SQL語句爲：SELECT * FROM 銷量 where 地區='${area}'，其中有一個數據集參數 area ，如下圖所示：

3.2 設計報表

1）在 body 中添加兩個「按鈕控件」、一個報表塊、一個餅圖圖表。如下圖所示：

2）「按鈕控件」名稱分别爲超鏈接-報表塊、超鏈接-圖表，将 ds1 數據集字段拖入單元格中，設計報表樣式，如下圖所示：

3）餅圖「數據」如下圖所示設置：

3.3 添加點擊事件

1）選中超鏈接-報表塊「按鈕控件」button0 ，爲其添加一個「點擊」事件，事件需要添加一個參數 area，值爲華北。如下圖所示：

JavaScript 代碼如下：

//傳遞參數，刷新報表塊
_g().getWidgetByName('report0').gotoPage(1, {
"area": area
}, 'T');

2）同樣的方法，爲超鏈接-圖表「按鈕控件」button1 添加「點擊」事件，事件需要添加一個參數 area，值爲華北。如下圖所示：

JavaScript 代碼如下：

//給圖表塊傳參
FR.Chart.WebUtils.changeParameter(
	'chart0', {
		"area": area,
	}
);

3.4 效果預覽

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

注：不支持移動端。

修改全局參數示例

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\28-js實現超鏈接-動态參數.frm

點擊下載模板：28-js實現超鏈接-動态參數.frm

傳遞參數值示例

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\28-js實現超鏈接-當前表單對象.frm

點擊下載模板：28-js實現超鏈接-當前表單對象.frm