页面的左侧为参数输入区域,右侧的数据报表须要根据参数实时查询结果,效果如下图:
实现步骤:
1 准备报表
连接默认的 demo 数据源,制作如下报表:
个中,报表参数为:
用于吸收地区和城市参数。
报表数据集为:
2 定义参数输入
定义参数输入页面,如下:
<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><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><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>
这样,在选择参数后会触发 onChange 事宜,通过自动修正 iframe 的 src 属性即可实现联动查询效果。