如何控制报表组点查询后默认选择的 tab 页

报表组由多个报表组成,在 web 端一般以多 tab 页形式进行展现。而不同的用户关注点往往不同,通常会要求报表组打开时默认展示自己关注的 tab 页,为此报表工具提供了控制报表组的 js 函数: group_selectSheet(),只要在报表组展示的 jsp 页面中调用这个 js 函数就可以控制报表组打开时默认展示哪个 tab 页,例如可以下段代码加入到展示报表组页面的 js 里:

$(document).ready(function() {

group_selectSheet(“group1”,“订单明细”);

});

这样,在报表组打开时会默认选中“订单明细”这个 tab 页,如下图:

1jpg

注:group_selectSheet 函数是按照标题名称设置 tab 页,这个例子中就是报表组中的标题“订单明细”。

实际使用时,报表组通常还会带有参数表单,选择参数后点击查询会转入 queryGroup.jsp 重新查询展示报表组。这时,一般会要求所选择的 tab 页保留在之前客户手动选择的 tab 页。所以,上例中的“订单明细”不能设置成固定的,而是要动态获取鼠标选择的 tab 页。

解决方案:

要实现这个需求,要解决两个问题:

一:如何获取当前页面中鼠标选择的 tab 页。

二:如何将选择的 tab 页传入到报表组结果页面进行控制。

首先看一下如何获取 tab 页的值,报表同样提供了相应的 js 函数,用于获取当前报表组中鼠标所选 tab 页:group_getCurrSheetTitle(“group1”),group1 是 tag 标签中指定的 groupId 的值,这样就可以通过该函数获取当前标题值,之后在点击查询后将该值传入到展示页面即可。接下来看看如何将该值传递过去。

点击查询时,报表组跳转的页面是通过参数模板标签中的 resultPage 控制的,所以只要控制这个值就行了,同样,这也可以通过 js 来控制。在页面中增加如下代码:

function newsubmit(){

var a=group_getCurrSheetTitle(“group1”); form1.resultPage.value=form1.resultPage.value.replace(“sn”,“n”)+“&sn=”+a;

_submit(form1);

}

在 js 中新增函数:newsubmit(),获取当前选择的 tab 页,并且控制跳转页面:form1.resultPage.value 的值,在该值后边增加参数”&sn=”+a,将当前选择的页面标题传递给 url 上的 sn 参数。注意:由于会涉及到多次点击查询,这样 url 上会拼接多次 sn 参数,所以要将之前的 sn 参数名替换成 n,避免多次点击查询造成影响,最后再执行内置的 js 函数:_submit( form1); 执行查询操作。

添加了这个 js 函数后,还要更改页面中查询按钮的事件,这样点击查询后就会调用新增加的 js 函数:

找到 showReportGroup.jsp 中的:

<a href="javascript:_submit( form1 )" class="easyui-linkbutton" style="vertical-align:middle;padding:0px 8px;"><%=ServerMsg.getMessage(request,"jsp.query")%></a>

将javascript:_submit( form1 )改成:javascript:newsubmit(),这样报表组点击查询后就会进入到指定页面,并将当前页面选择的tab页的标题通过sn参数传递过去。

接下来再修改queryGroup.jsp来控制查询后的tab页选择,首先在jsp页面中的java代码里增加如下代码:

String sn = request.getParameter( "sn" );

从url中获取sn参数的值,然后在页面的js里增加:

 window.setTimeout( "selectTab()", 0 );

 function selectTab() {

  group_selectSheet("group1","<%=sn%>");

 }

这样,通过自带的js函数group_selectSheet,可以控制当前页面选择的tab页。注:报表组默认展现时是选择第一个tab页,所以要通过window.setTimeout( "selectTab()", 0 );控制下函数的加载,这样就能切换到之前选择的tab页里。