制作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比较消耗资源（客户端），慎用！

查看全文

相关阅读:
b4a专用压缩库（国外免费）
使用php从pc端下载apk到android手持终端并安装（比如把枪）
快速搭建电子商务网站以及app
【转】C#如何创建泛型类T的实例
 【转】C# 之泛型详解
 【转】Windows Server 2016 安装 IIS 服务时提示指定备用源路径
 C# json字符串转为对象
 【转】C#模拟http 发送post或get请求
 【转】Windows IIS注册asp 此操作系统版本不支持此选项错误解决方法
 Webapi文件上传

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