页面的左侧为参数输入区域,右侧的数据报表须要根据参数实时查询结果,效果如下图:

实现步骤:

1 准备报表

jsp实现向润乾传递参数值若何实现参数和报表间的联动后果 RESTful API

连接默认的 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 属性即可实现联动查询效果。