报表知识库
我要提问

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

问题描述

客户制作了一个带有参数模板的报表组,客户希望在点击查询报表组之后,页面不跳转回报表组的第一个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页面的功能就实现了。