切换报表组tab页动态隐藏参数下拉框

问题背景

有客户希望点击发布后集智平台中报表组的tab页时，能够动态隐藏参数模板中的下拉框。如点击sheet1时显示下拉列表框，点击sheet2时隐藏该列表框。

思路分析

想要实现这个效果，必须得在切换tab页时调用某方法或触发某事件实现该效果。查看报表组发布后页面源码发现，tab标签处的源码如下：

<label id=”tab_item1″ reportId=”item1″ onclick=_groupClicked(this) class=rq_curr><a href=” onclick=’return false;’><span>sheet1</span></a></label>

<label id=”tab_item2″ reportId=”item2″ onclick=_groupClicked(this)><a href=” onclick=’return false;’><span>sheet2</span></a></label>

由于label的onclick事件已被使用，所以可以增加span的onclick事件，在调用的方法中设置下拉列表框所在td隐藏即可。

实现实例

制作带有两张报表的报表组，参数模板如下：

在发布报表组的jsp中增加如下js：

var node = document.getElementById(“tab_item1″).childNodes[0].childNodes[0];//tab_item1为报表组的第一个tab页

if(“SPAN”==node.nodeName){

node.onclick=function(){

document.getElementById(“form1_C1″).style.display=”block”;

}

}

var node = document.getElementById(“tab_item2″).childNodes[0].childNodes[0];//tab_item2为报表组的第二个tab页，以此类推

if(“SPAN”==node.nodeName){

node.onclick=function(){

document.getElementById(“form1_C1″).style.display=”none”;

}

}

发布后，当点击sheet1时，下拉列表框正常显示：

点击sheet2，下拉列表框隐藏：

类似这种集智平台中报表已封装的方法中没有，而且需要在页面上实现的功能，我们都可以根据发布报表的页面源文件中提供的信息帮助我们实现最后想要的效果。