"润乾报表4 问题描述客户制作了一个带有参数模板的报表组，客户希望在点击查询报表组之后，页面不跳转回报表组的第一个 tab 页，而是停留在客户点击查询按钮时的 tab 页面。而目前润乾报表默认 .."

IBelieve 北京
乾学院 46 号会员
5 回帖 • 1,078 浏览 • 6 年前

报表组查询后显示当前 tab 页

灌水

润乾报表4
问题描述

客户制作了一个带有参数模板的报表组，客户希望在点击查询报表组之后，页面不跳转回报表组的第一个 tab 页，而是停留在客户点击查询按钮时的 tab 页面。而目前润乾报表默认的方式是跳转回到第一个 tab 页，不会停留在当前 tab 页上，所以要实现客户的需求采用 js 的方式给报表传参数，控制报表显示的 tab 页。

实现思路

给报表组的页面传一个参数 showFlag，通过这个参数控制报表显示或者隐藏哪个 tab 页，再点击 tab 页标签的时候就给页面传对应的 showFlag 参数，然后调用润乾的点击 tab 页的函数，这样如果把参数顺利传递过去就可以控制报表显示或隐藏哪个 tab 页了。

实现步骤

1，以三个 tab 页的报表组为例，通过 showFlag 参数控制报表组显示或隐藏 tab 页的 java 代码和 js 函数如下：

<%  
out.println(”showFlag:”+showFlag);  
if(”2″.equals(showFlag)){%>  
标志为2的时候就显示第二张报表，就是div名字为div_item2的层  
<script language=”javascript”>  
document.getElementById( “div_item1″ ).style.display = “none”;  
document.getElementById( “div_item2″ ).style.display = “”;  
document.getElementById( “div_item3″ ).style.display = “none”;  
//更改tab页字体的颜色  
document.getElementById(”tab_item1″).className=””;  
document.getElementById(”tab\_item2″).className=”rq\_curr”;  
document.getElementById(”tab_item3″).className=””;  
< /script>  
< %}else if(”3″.equals(showFlag)){%>  
显示第三个报表的div，隐藏第一、二个报表的div  
< script language=”javascript”>  
document.getElementById( “div_item3″ ).style.display = “”;  
document.getElementById( “div_item2″ ).style.display = “none”;  
document.getElementById( “div_item1″ ).style.display = “none”;  
document.getElementById(”tab\_item3″).className=”rq\_curr”;  
document.getElementById(”tab_item2″).className=””;  
document.getElementById(”tab_item1″).className=””;  
< /script>  
< %}  
else{%>  
显示第一个报表的div，隐藏第二、三个报表的div  
< script language=”javascript”>  
document.getElementById( “div_item1″ ).style.display = “”;  
document.getElementById( “div_item2″ ).style.display = “none”;  
document.getElementById( “div_item3″ ).style.display = “none”;  
document.getElementById(”tab\_item1″).className=”rq\_curr”;  
document.getElementById(”tab_item2″).className=””;  
document.getElementById(”tab_item3″).className=””;  
< /script>  
< %}%>

这样就可以实现通过 showFlag 参数值不同设置隐藏或显示相应的 tab 页。

2，制作报表组的参数模板：

参数模板，需要注意的是第二行 B2 单元格的变量名设置为 showFlag，也就是上面提到的参数。

3，通过点击 tab 页给报表组传参数，设置 tab 页的隐藏属性。代码如下：

<script language=”javascript”>  
//重新定义第二个报表tab页的点击事件  
document.getElementById(’tab_item2′).onclick=function()  
{ //显示第二个报表的div，隐藏第一、三个报表的div  
document.getElementById( “div_item1″ ).style.display = “none”;  
document.getElementById( “div_item2″ ).style.display = “”;  
document.getElementById( “div_item3″ ).style.display = “none”;  
//更改tag标签字体的颜色  
document.getElementById(”tab_item1″).className=””;  
document.getElementById(”tab\_item2″).className=”rq\_curr”;  
document.getElementById(”tab_item3″).className=””;  
//调用快逸自定义的tab页自定义函数  
\_groupClicked(document.getElementById(’tab\_item2′));  
document.getElementById(”showFlag”).value=2;  
}  
//重新定义第一个报表tab页的点击事件  
document.getElementById(’tab_item1′).onclick=function(){  
document.getElementById( “div_item1″ ).style.display = “”;  
document.getElementById( “div_item2″ ).style.display = “none”;  
document.getElementById( “div_item3″ ).style.display = “none”;  
document.getElementById(”tab\_item1″).className=”rq\_curr”;  
document.getElementById(”tab_item2″).className=””;  
document.getElementById(”tab_item3″).className=””;  
\_groupClicked(document.getElementById(’tab\_item1′));  
document.getElementById(”showFlag”).value=1;  
}  
//重新定义第三个报表tab页的点击事件  
document.getElementById(’tab_item3′).onclick=function(){  
document.getElementById( “div_item3″ ).style.display = “”;  
document.getElementById( “div_item2″ ).style.display = “none”;  
document.getElementById( “div_item1″ ).style.display = “none”;  
document.getElementById(”tab\_item3″).className=”rq\_curr”;  
document.getElementById(”tab_item2″).className=””;  
document.getElementById(”tab_item1″).className=””;  
\_groupClicked(document.getElementById(’tab\_item3′));  
document.getElementById(”showFlag”).value=3;  
}  
**</script>**

4，编写完整的 jsp 代码：

有了以上的 js 函数和报表组参数模板的设置，就可以编写完整的 jsp 代码来发布报表组了，jsp 的全部代码如下：

<%@ page contentType=”text/html;charset=GBK” %>  
< %@ taglib uri=”/WEB-INF/runqianReport4.tld” prefix=”report” %>  
< %@ page import=”java.io.*”%>  
< %@ page import=”java.util.*”%>  
< %@ page import=”com.runqian.report4.view.*”%>  
< html>  
< body topmargin=0 leftmargin=0 rightmargin=0 bottomMargin=0>  
< %  
String showFlag1 = request.getParameter(”showFlag”);  
//接收参数，把参数拼成name=value;name2=value2;…..的形式  
StringBuffer param=new StringBuffer();  
Enumeration paramNames = request.getParameterNames();  
if(paramNames!=null){  
while(paramNames.hasMoreElements()){  
String paramName = (String) paramNames.nextElement();  
String paramValue=request.getParameter(paramName);  
if(paramValue!=null){  
//把参数拼成name=value;name2=value2;…..的形式  
param.append(paramName).append(”=”).append(paramValue).append(”;”);  
}  
}  
}  
String reportParamsId=request.getParameter(”reportParamsId”);  
Hashtable params = null;  
String showFlag=null;  
if(!””.equals(reportParamsId) && reportParamsId != null){  
params = com.runqian.report4.view.ParamsPool.get( reportParamsId );  
showFlag=(String) params.get(”showFlag”);  
} else{  
showFlag=request.getParameter(”showFlag”);  
//out.print(”showFlag=============”+showFlag);  
if(showFlag==null || showFlag.equals(””)){  
showFlag=”1″;  
}  
%>  
< table id=”rpt” align=”center”><tr><td>  
< table id=”param_tbl” width=”100%” height=”100%” align=”top”><tr><td>  
< report:param name=”form1″ paramFileName=”group_arg.raq”  
needSubmit=”no”  
params=”<%=param.toString()%>”  
/>  
< /td>  
< td><a href=”javascript:_submit( form1 )”><img src=”../images/query.jpg” border=no style=”vertical-align:middle”></a></td>  
< /tr></table>  
< !–导入存有工具栏的jsp–>  
< jsp:include page=”toolbar.jsp” flush=”false” />  
< table align=center>  
< tr><td>  
< report:group groupFileName=”group.rpg”  
funcBarLocation=””  
exceptionPage=”/reportJsp/myError2.jsp”  
params=”<%=param.toString()%>”  
/>  
< /td></tr>  
< /table>  
< %  
if(”2″.equals(showFlag)){%>  
标志为2的时候就显示第二张报表，就是div名字为div_item2的层  
<script language=”javascript”>  
document.getElementById( “div_item1″ ).style.display = “none”;  
document.getElementById( “div_item2″ ).style.display = “”;  
document.getElementById( “div_item3″ ).style.display = “none”;  
//更改tab页字体的颜色  
document.getElementById(”tab_item1″).className=””;  
document.getElementById(”tab\_item2″).className=”rq\_curr”;  
document.getElementById(”tab_item3″).className=””;  
< /script>  
< %}else if(”3″.equals(showFlag)){%>  
显示第三个报表的div，隐藏第一、二个报表的div  
< script language=”javascript”>  
document.getElementById( “div_item3″ ).style.display = “”;  
document.getElementById( “div_item2″ ).style.display = “none”;  
document.getElementById( “div_item1″ ).style.display = “none”;  
document.getElementById(”tab\_item3″).className=”rq\_curr”;  
document.getElementById(”tab_item2″).className=””;  
document.getElementById(”tab_item1″).className=””;  
< /script>  
< %}  
else{%>  
显示第一个报表的div，隐藏第二、三个报表的div  
< script language=”javascript”>  
document.getElementById( “div_item1″ ).style.display = “”;  
document.getElementById( “div_item2″ ).style.display = “none”;  
document.getElementById( “div_item3″ ).style.display = “none”;  
document.getElementById(”tab\_item1″).className=”rq\_curr”;  
document.getElementById(”tab_item2″).className=””;  
document.getElementById(”tab_item3″).className=””;  
< /script>  
< %}%>  
< script language=”javascript”>  
//重新定义第二个报表tab页的点击事件  
document.getElementById(’tab_item2′).onclick=function()  
{ //显示第二个报表的div，隐藏第一、三个报表的div  
document.getElementById( “div_item1″ ).style.display = “none”;  
document.getElementById( “div_item2″ ).style.display = “”;  
document.getElementById( “div_item3″ ).style.display = “none”;  
//更改tag标签字体的颜色

document.getElementById(”tab_item1″).className=””;  
document.getElementById(”tab\_item2″).className=”rq\_curr”;  
document.getElementById(”tab_item3″).className=””;  
//调用快逸自定义的tab页自定义函数  
\_groupClicked(document.getElementById(’tab\_item2′));  
document.getElementById(”showFlag”).value=2;  
}  
//重新定义第一个报表tab页的点击事件  
document.getElementById(’tab_item1′).onclick=function(){  
document.getElementById( “div_item1″ ).style.display = “”;  
document.getElementById( “div_item2″ ).style.display = “none”;  
document.getElementById( “div_item3″ ).style.display = “none”;  
document.getElementById(”tab\_item1″).className=”rq\_curr”;  
document.getElementById(”tab_item2″).className=””;  
document.getElementById(”tab_item3″).className=””;  
\_groupClicked(document.getElementById(’tab\_item1′));  
document.getElementById(”showFlag”).value=1;  
}  
//重新定义第三个报表tab页的点击事件  
document.getElementById(’tab_item3′).onclick=function(){  
document.getElementById( “div_item3″ ).style.display = “”;  
document.getElementById( “div_item2″ ).style.display = “none”;  
document.getElementById( “div_item1″ ).style.display = “none”;  
document.getElementById(”tab\_item3″).className=”rq\_curr”;  
document.getElementById(”tab_item2″).className=””;  
document.getElementById(”tab_item1″).className=””;  
\_groupClicked(document.getElementById(’tab\_item3′));  
document.getElementById(”showFlag”).value=3;  
}  
< /script>  
< /body>  
< /html>

5，制作并发布报表组：

制作一个有三个 tab 页的报表组，命名为 group.rpg，然后命名上面制作的参数模板为 group_arg.raq，最后用上面的 jsp 发布报表组。

点击查询按钮后报表组仍然停留在当前的 tab 页，而没有跳转的第一个 tab 页。

在报表中点击查询按钮后，页面停留在客户点击查询按钮时的 tab 页面的功能就实现了。

5 回帖

请输入回帖内容 ...

cht123456 • 2 年前

你好，这个有没有源码文件分享呢？

1 回复
CGQ • 2 年前

您好 jsp 里的相关代码上面已经都帖完整了，其他的产品的源码是没有的，产品不开源

1 回复
cht123456 • 2 年前

这边执行总是报错，像这些：_groupClicked,tab_item1,rq_curr, 反斜杠是转义符吧？

1 回复
gxy • 2 年前

你这边现在用的什么版本？上边文档中是 V4 版本中的用法，如果你这边是最新版的话可以参考下：http://c.raqsoft.com.cn/article/1557451713755 这个链接

1 回复
cht123456 • 2 年前

谢谢老哥👍