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

zoukankan html css js c++ java

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

方案1
<body> <div class='aa1'id=aa1> GridView1</div> <div class='aa2' id=aa2 onScroll=doSrl()> GridView2 </div> </body> <script type="text/javascript" language=javascript> function doSrl() { document.getElementById('aa1').scrollTop = document.getElementById('aa2').scrollTop } </script>
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'> .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:550px;WIDTH:500px;OVERFLOW:auto; ' ><div> <table cellspacing="1" cellpadding="4" border="0" id="dgTittle3" style="color:#333333;background-color:#333333;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;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" 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> <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> <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> <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> <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> 
方案2比较消耗资源（客户端），慎用！

查看全文

相关阅读:
Js设计模式之：单例模式
 javascript中的匿名方法（函数）是什么？
JavaScript 模块化简析
 JavaScript V8 Object 内存结构与属性访问详解
 JavaScript 开发者应该知道的 setTimeout 秘密
 JavaScript 函数式编程导论
 javascript中如何实现继承？
关于token你需要知道的【华为云技术分享】
移动端开发语言的未来的猜想#华为云·寻找黑马程序员#【华为云技术分享】
MySQL数据库开发的36条原则【华为云技术分享】

原文地址：https://www.cnblogs.com/moses/p/730602.html