http://blog.runqian.com.cn/?p=1833
在报表交互分析中,报表经常需要根据参数变化实时联动展现。润乾集算报表可以实现参数联动效果,下面通过一个例子说明。
页面的左侧为参数输入入口,参数选择后右侧数据报表会根据左侧的选择实时查询得到结果,如下图:
实现步骤见下。
准备报表
连接默认的demo数据源,制作如下报表:
其中,报表参数为:
用于接收地区和城市参数。
报表数据集为:
定义参数输入
定义参数输入页面,如下:
<html>
<head>
</head>
<body>
<table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”100%” height=”100%”>
<tr>
<td valign=”top” align=”center” width=”10%”>
<a >请选择参数:</a><br><br>
<form>
<select name=”area” onChange=”change(1,this.options[this.selectedIndex].value)”>
<option value=”华北” selected=”selected”>华北</option>
<option value=”东北”>东北</option>
<option value=”华南”>华南</option>
<option value=”华东”>华东</option>
</select>
<br><br>
<select name=”city” onChange=”change(2,this.options[this.selectedIndex].value)”>
<option value=”北京”>北京</option>
<option value=”天津”>天津</option>
<option value=”上海”>上海</option>
<option value=”长春”>长春</option>
</select>
</form>
</td>
<td width=”90%”>
<iframe width=”100%” height=”100%” frameborder=”0″ align=”left” src=”autoQuery.jsp?rpx=demo.rpx&area=华北&city=北京” scrolling=”auto” id=”report” name=”report”>
</td>
</tr>
<table>
</body>
</html>
其中,数据报表采用iframe嵌入,发布报表的showReport.jsp可以集算报表的安装包中获得。这里需要定义下拉框onChange事件。加入如下JS代码:
<script type=”text/javascript”>
function change(type,value){
var url = parent.document.getElementById(“report”).src;
var arr = url.split(“&”);
var area = arr[1].split(“=”)[1];
var city = arr[2].split(“=”)[1];
if(type==1) area=value;
if(type==2) city=value;
document.getElementById(“report”).src=”showReport.jsp?rpx=demo.rpx&area=”+area+”&city=”+city
}
</script>
选择参数后通过修改iframe的src属性,即可实现联动查询效果。