页面js实现报表列显示和隐藏

需求背景

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

实现步骤

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

接着我们在发布报表的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>