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

最新推荐文章于 2022-10-19 10:15:00 发布

xiaohuihui_1992

最新推荐文章于 2022-10-19 10:15:00 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：润乾报表文章标签：润乾V4 润乾报表页面js 列显示列隐藏

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/xiaohuihui_1992/article/details/53418010

润乾报表专栏收录该内容

291 篇文章

订阅专栏

本文介绍了如何利用润乾报表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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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