需求背景客户希望报表发布后,通过在页面上设置报表隐藏某一列,以便进行数据显示比较。具体为,页面上有个所有列的下拉框,当选择哪列时该列隐藏,其他列显示;选择无时,所有列都显示。 实现步骤首先我们设计一张简单测试报表,如下图:
接着我们在发布报表的jsp中实现该功能: 1、制作选择要隐藏的列输入框 <select class="text select" id="mode" οnchange="modelChange(this);"> <option value="col0" selected="selected">无</option> <option value="col1" >第一列</option> <option value="col2" >第二列</option> <option value="col3" >第三列</option> <option value="col4" >第四列</option> </select>
2、然后实现第一列隐藏的js代码 if(obj.value=="col1"){ //alert("隐藏第一列!"); for(var i=0;i<tbs.length;i++){ for(var j=0;j<tbs[i].rows.length;j++){ for(var k=0;k<tbs[i].rows[j].cells.length;k++){ tbs[i].rows[j].cells[k].style.display=""; } tbs[i].rows[j].cells[0].style.display="none"; } } }
3、最后写入发布报表的标签
我们来看一下实现的效果: 页面初次加载
选择隐藏第二列
完整代码如下: <%@ page contentType="text/html;charset=GBK" %> <%@ taglib uri="/WEB-INF/runqianReport4.tld" prefix="report" %>
<html> <head> </head> <script type="text/javascript">
function modelChange(obj){ //alert("调用成功!"); var tbs = document.getElementsByTagName("table"); //tbs[0].rows[0].cells[0].style.display="none";
if(obj.value=="col0"){ //alert("显示全部!"); for(var i=0;i<tbs.length;i++){ for(var j=0;j<tbs[i].rows.length;j++){ for(var k=0;k<tbs[i].rows[j].cells.length;k++){ tbs[i].rows[j].cells[k].style.display=""; } } } }
if(obj.value=="col1"){ //alert("隐藏第一列!"); for(var i=0;i<tbs.length;i++){ for(var j=0;j<tbs[i].rows.length;j++){ for(var k=0;k<tbs[i].rows[j].cells.length;k++){ tbs[i].rows[j].cells[k].style.display=""; } tbs[i].rows[j].cells[0].style.display="none"; } } }
if(obj.value=="col2"){ //alert("隐藏第二列!"); for(var i=0;i<tbs.length;i++){ for(var j=0;j<tbs[i].rows.length;j++){ for(var k=0;k<tbs[i].rows[j].cells.length;k++){ tbs[i].rows[j].cells[k].style.display=""; } tbs[i].rows[j].cells[1].style.display="none"; } } }
if(obj.value=="col3"){ //alert("隐藏第三列!"); for(var i=0;i<tbs.length;i++){ for(var j=0;j<tbs[i].rows.length;j++){ for(var k=0;k<tbs[i].rows[j].cells.length;k++){ tbs[i].rows[j].cells[k].style.display=""; } tbs[i].rows[j].cells[2].style.display="none"; } } }
if(obj.value=="col4"){ //alert("隐藏第四列!"); for(var i=0;i<tbs.length;i++){ for(var j=0;j<tbs[i].rows.length;j++){ for(var k=0;k<tbs[i].rows[j].cells.length;k++){ tbs[i].rows[j].cells[k].style.display=""; } tbs[i].rows[j].cells[3].style.display="none"; } } }
}
</script>
<body> <div> <ul><li> <font>选择要隐藏的列:</font> <select class="text select" id="mode" οnchange="modelChange(this);"> <option value="col0" selected="selected">无</option> <option value="col1" >第一列</option> <option value="col2" >第二列</option> <option value="col3" >第三列</option> <option value="col4" >第四列</option> </select> </li></ul> </div>
<report:html name="report1" reportFileName="hiddenCell.raq" funcBarLocation="" needPageMark="yes" generateParamForm="no" needSaveAsExcel="yes" exceptionPage="/reportJsp/myError2.jsp" /> </body> </html> |
润乾报表如何通过页面js实现报表列显示和隐藏
最新推荐文章于 2022-10-19 10:15:00 发布