润乾报表如何通过页面js实现报表列显示和隐藏

本文介绍了如何利用润乾报表V4版本的特性,结合页面JavaScript实现报表列的动态显示和隐藏,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求背景

         客户希望报表发布后,通过在页面上设置报表隐藏某一列,以便进行数据显示比较。具体为,页面上有个所有列的下拉框,当选择哪列时该列隐藏,其他列显示;选择无时,所有列都显示。

实现步骤

         首先我们设计一张简单测试报表,如下图:


 

         接着我们在发布报表的jsp中实现该功能:

1、制作选择要隐藏的列输入框

<select class="text select" id="mode" onchange="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" onchange="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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值