脚印

:: :: :: ::

::

制作gridview 固定列的2种简单解决方案

Posted on 2007-04-28 08:58 脚印阅读(1885) 评论(3) 编辑收藏举报

方案1

css 部分就不写了，设计的思路是将gridview1绑定固定列，gridview2绑定可以移动的列，当然你还以在gridview的Hearderstyle里面加一些css控制为列头固定利用div aa2的onScroll事件，将div aa1的scrollTop 设置为div aa2的scrollTop

这是一种做法，也可以用三个div来做，一个大div中套2个小的div，用大div scroll-y来控制上下移动用活动div来控制左右活动

这种方法简单，容易实现并且消耗资源少

方案2

<style TYPE='text/css'> <BR>.Freezing <BR>{ <BR> position:relative ; <BR> top:expression(this.offsetParent.scrollTop); <BR> z-index: 10; <BR> background-color: White;<BR>}<BR>.FreezingCol <BR>{ <BR> LEFT: expression(document.getElementById('div_dgTittle3').scrollLeft);<BR> POSITION: relative; <BR> z-index: 1; <BR>}<BR></style><BR><div id='div_dgTittle3' style=' HEIGHT:550px;WIDTH:500px;OVERFLOW:auto; ' ><div><BR><table cellspacing="1" cellpadding="4" border="0" id="dgTittle3" style="color:#333333;background-color:#333333;width:700px;"><BR><tr class="Freezing" style="color:White;background-color:#333333;font-weight:bold;"><BR><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><BR></tr><BR><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><BR><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><BR><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><BR><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><BR><tr style="background-color:#EFF3FB;"><td class="FreezingCol" style="height: 27px">Abraham</td><td style="height: 27px"> 56'</td><td style="white-space:nowrap; height: 27px;">10/104 New Delhi GT road</td></tr><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR><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><BR></table><BR></div></div><BR>

方案2比较消耗资源（客户端），慎用！

刷新页面返回顶部