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

需求背景

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

实现步骤

首先我们复杂报表设计" target="_blank" class="quieeLink1">设计一张简单测试报表，如下图：

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

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

无

第一列

第二列

第三列

第四列

2、然后实现第一列隐藏的js代码

if(obj.value==”col1″){

//alert(“隐藏第一列！“);

for(var i=0;i

for(var j=0;j

for(var k=0;k

tbs[i].rows[j].cells[k].style.display=”";

}

tbs[i].rows[j].cells[0].style.display=”none”;

}

}

}

3、最后写入发布报表的标签

我们来看一下实现的效果：

页面初次加载

选择隐藏第二列

完整代码如下：

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

for(var j=0;j

for(var k=0;k

tbs[i].rows[j].cells[k].style.display=”";

}

}

}

}

if(obj.value==”col1″){

//alert(“隐藏第一列！“);

for(var i=0;i

for(var j=0;j

for(var k=0;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

for(var j=0;j

for(var k=0;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

for(var j=0;j

for(var k=0;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

for(var j=0;j

for(var k=0;k

tbs[i].rows[j].cells[k].style.display=”";

}

tbs[i].rows[j].cells[3].style.display=”none”;

}

}

}

}

• 选择要隐藏的列：

  无

  第一列

  第二列

  第三列

  第四列

funcBarLocation=”"

needPageMark=”yes”

generateParamForm=”no”

needSaveAsExcel=”yes”

exceptionPage=”/reportJsp/myError2.jsp”

/>