这几天开发GridView的固定标题和固定列的实现,其实这种东西在网上有很多例子,顺手就能拷贝很多版本。
但在执行后也就分为两种。一种是单Table,第二种是多Table。
单一Table的如下:
<style TYPE='text/css'>
.Freezing
{
position:relative ;
top:expression(this.offsetParent.scrollTop);
z-index: 10;
background-color: White;
}
.FreezingCol
{
LEFT: expression(document.getElementById('div_dgTittle3').scrollLeft);
POSITION: relative;
z-index: 1;
}
</style>
<div id='div_dgTittle3' style=' HEIGHT:250px;WIDTH:600px;OVERFLOW:auto; ' ><div>
<table cellspacing="1" cellpadding="4" border="0" id="dgTittle3" style="color:#333333;background-color:#333333;width:700px;">
<tr class="Freezing" style="color:White;background-color:#333333;font-weight:bold;">
<th align="center" scope="col" style="background-color:#507CD1;" class="FreezingCol">Name</th><th align="center" scope="col" style="background-color:#507CD1;">Grade</th><th align="center" scope="col" style="background-color:#507CD1;width:400px;">Address</th>
</tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
</table>
</div></div>
也就是根据样式表中的
top:expression(this.offsetParent.scrollTop);
LEFT: expression(document.getElementById('div_dgTittle3').scrollLeft);
控制标题和固定列的控制。
而多Table则使用DIV的Postion属性来控制多表的重叠,然后使用Javascript来控制滚动。
两者各自有各自的优点和缺点。
前者实现简单而且好控制,后者手续太麻烦且控制麻烦。
但一旦数据量太多时单表的固定列控制占用CPU过高而产生死机现象。
因为每次的滚动需要太多的位置计算。
所以本人觉得使用这些时应先考录其数据量,尽量减小投入资源