本文介绍了如何在Web应用开发中实现一次性加载大量数据并保持表头行固定，同时解决了IE8浏览器中由于滚动条导致的数据列和表头列对齐问题。通过初始化表头和正文表格，设置适当的样式，并针对IE8的滚动条宽度进行调整，实现了在不同浏览器中的兼容性。此外，还讨论了可能存在的事件监听对AJAX页面影响的问题。
大鱼吃小雨，快鱼吃慢雨，市场竞争无比激烈的今天，谁不以客户为导向，以客户为中心，时刻为客户提供优质的服务，必然被市场无情的淘汰。
最近一个客户希望：一次性将所有的数据全部展示出来，不需要分页，且表头行固定。这种数据量不大，一次性全部展示具有直观、一目了然的作用，这种需求的确的很合理。故google一下，发现各位朋友的方法不计其数。归纳起来为以下几点：
- 初始化表头：表头内容放入一个table中，计算表头各列好百分比；
- 初始化正文DIV：正文DIV应用overflow-y: auto; overflow-x: hidden（显纵不显横），固定其高度 height: 350px（可以指定）；
- 显示正文table放入正文DIV中，且将数据各列百分比和表头各列保持一致。
如下所示：
<div id="report">
<table id="head" border="1" width="98%" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
style="border-collapse: collapse; font-size: 12px; text-align: left; color: White;
font-weight: bold; background-color: Green;">
<tr>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
名称
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
性别
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
职务
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
学历
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
籍贯
</td>
</tr>
</table>
<div id="scroll" style="overflow-y: auto; overflow-x: hidden; height: 370px; width: 98%">
<table id="context" width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
style="border-collapse: collapse; font-size: 12px; text-align: left; color: White;
font-weight: bold; background-color: Gray;">
<tr>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
张三
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
男
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
段长
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
本科
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
北京
</td>
</tr>
</table>
</div>
</div>
问题：浏览兼容性问题，经测试IE6,7都没有问题，唯独IE8出现了数据列和表头列没有对齐。
作为web应用开发，面对浏览器，我们始终处于弱势，哪怕是浏览呈现出错，我们也只能将错就错，在错误的基础上达到我们的目的。
优化方案：经过分析，数据列和表头列错位的原因是滚动条占有17px的宽度，影响数据列的百分比。试想一下，如果正文DIV始终比其中的内容Table多17px，那么表头table和内容table宽度则处于同一起点和终点。
如下所示：
<body style="margin-left: 20px; text-align: left;" onresize="dynTableSize();"
onload="dynTableSize(0.98,20,25,350)">
<div style="color: #0c2274; background-color: Blue; text-align: center;">
用户信息
</div>
<table id="menu" cellspacing="0" cellpadding="0" border="0" style="font-size: 12px;
width: 98%; background-color: Red;">
<tr>
<td>
查询条件
</td>
</tr>
</table>
<div id="report">
<table id="head" border="1" width="98%" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
style="border-collapse: collapse; font-size: 12px; text-align: left; color: White;
font-weight: bold; background-color: Green;">
<tr>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
名称
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
性别
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
职务
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
学历
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
籍贯
</td>
</tr>
</table>
<div id="scroll" style="overflow-y: auto; overflow-x: hidden; height: 370px; width: 98%">
<table id="context" border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
style="border-collapse: collapse; font-size: 12px; text-align: left; color: White;
font-weight: bold; background-color: Gray;">
<tr>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
张三
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
男
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
段长
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
本科
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
北京
</td>
</tr>
</table>
</div>
<script type="text/javascript">
//当且仅当显示数据table高度大于div时则出现滚动条
//1.获取table高度
//2.table高度>div高度则div的宽度 = 当时区域宽度 + 17px
//3.改变表头的宽度
//4.改变查询条件区域宽度
//5.记住表头table(head)宽度为w百分比，
//6.内容(context)容器div的宽度为w百分比且内容(context)不需要百分比
//7.内容(context)中有个td内容换行。
//v_width:百分比，
//v_margin:margin-left ,
//v_hiegth:height,
//v_maxh:最大高度
function dynTableSize(v_width,v_margin,v_hiegth,v_maxh){
//正文默认高度
var v_nheight = 10;
try{
//正文实际高度
v_nheight = document.getElementById("context").childNodes[0].childNodes.length * v_hiegth;//正文的高度
}catch(e){}
//计算页面的宽度
var nwidth=document.body.clientWidth * v_width - v_margin;
//滚动条宽度17px
//当前上下表格中的数据高度大于最大高度时才加上滚动条17px否则不加
if(v_nheight > v_maxh){
document.getElementById("scroll").style.width = nwidth+17;
}else{
document.getElementById("scroll").style.width = nwidth;
}
try{
//改变表头的宽度
document.getElementById("head").style.width = nwidth;
//改变条件区域
document.getElementById("menu").style.width = nwidth;
}catch(e){}
}
</script>
</div>
</body>
实现过程：
- 捕获body的load和onresize事件；
- 计算内容table的实际高度；
- 计算页面的宽度；
- 判断table实际高度是否超过指定最高高度？如果超过，则正文DIV实际宽度加上滚动条宽度17px；否则为实际宽度；
- 改变关联的区域。
不足之处：捕获body的load和onresize事件，会不会影响此方法在使用AJAX页面的操作，有待检验？
扫一扫
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
