页面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>