在 ASP.NET 上实现锁定表头、支持滚动的表格的做法

简介:

首先看看 CodeProject 上的两个东西

1、The Freeze Pane DataGrid (http://www.codeproject.com/aspnet/FreezePaneDatagrid.asp

利用文章中提到做法及代码,可以实现在 ASP.NET 1.1 上的、支持横向滚动与纵向滚动的表格,基本上是使用 CSS 实现的,比较简单。

在 ASP.NET 2.0 上,由于文档 HTML DOCKTYPE 发生了变化(HTML->XHTML),所以在使用原文中的横向滚动条会出现问题,但是使用纵向滚动条和锁定表头没有问题。

这种做法没有考虑页面 PostBack 时记录表格的滚动位置,使得用户不得不重新去寻找刚才选中/编辑的那条记录,这比较的不人性化。

2、ScrollingGrid: A cross-browser freeze-header two-way scrolling DataGridhttp://www.codeproject.com/aspnet/ScrollingGrid.asp

此文章利用 Panel 控件和 DataGrid 控件实现了 ASP.NET 1.1 下的完整的、可实现双向滚动、表头锁定的表格,而且它实现了可以记录表格的滚动位置,页面 PostBack 后,表格仍能自动滚动到原有位置。这个控件的一个最大优点是能够适应多种浏览器,如 Internet Explorer 、FireFox 等。

在 ASP.NET 平台上,由于 DataGrid 控件已经升级为 GridView ,所以此控件已不能使用,按照文章下面的讨论,作者声称会尽快升级控件,但似乎在实现时碰到一些麻烦(如何确实表头各列的宽度),目前还没有结果。

目前我的做法:

  1. 参照文章1中提到的作法,利用 CSS 来实现锁定表头的功能
  2. 利用 Panel 控件,设置 ScrollBar 为 Vertical,再在其中放入 GridView 控件 ,可以实现竖向滚动条的功能
  3. 利用 Atlas ,将上述 Panel 再放入 UpdatePanel ,以透明实现保持滚动条位置的功能

示例代码:


    
    
< h1 > 滚动条表格演示h1> < style type ="text/css" > ... th {...}{ border-right: 1px solid silver; position:relative; top: expression(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.scrollTop-2); /**//*IE5+ only*/ } style> <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True"> atlas:ScriptManager> <br /> <asp:Panel ID="GridPanel" runat="server" Height="250px" ScrollBars="Auto" Width="562px"> <atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1" SkinID="GridView" Width="434px"> </asp:GridView> </ContentTemplate> </atlas:UpdatePanel> </asp:Panel>

这样能基本上实现一个能够锁定表头、竖向滚动、能够在页面PostBack时保持滚动位置的表格,能够满足大部分应用需要。




本文转自高海东博客园博客,原文链接:http://www.cnblogs.com/ghd258/archive/2006/10/12/527741.html,如需转载请自行联系原作者

相关文章
|
存储 JavaScript 前端开发
C#(.NET)面试题:做一个能自定定义输入命令的表格程序
C#(.NET)面试题:做一个能自定定义输入命令的表格程序
140 0
C#(.NET)面试题:做一个能自定定义输入命令的表格程序
NET快速信息化系统开发框架 V3.2 -“用户管理”主界面使用多表头展示、增加打印功能
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/79013549   RDIFrameowrk.NET 用户管理是使用非常频繁的模块,由于需要展示的字段比较多,以前的展示方式显得不是太规范,现3.2版本用户管理主界面进行了全新的设计,数据列表展示使用了Dev家族全新的GridControl控件。
1379 0
|
C# 开发者
C#/VB.NET设置Excel表格背景色
在查看很多有复杂的数据的表格时,为了能够快速地找到所需要的数据组时,往往需要对该数据组进行分类,一个简单快速的方法就是对数据组所在的单元格填充背景颜色,这样就使得我们在阅读文件时能够直观的看到数据分类,既美观又实用。
1372 0
|
Web App开发 JavaScript 前端开发
asp.net开发中利用jquery来实现滚动下拉标题浮动固定显示
1、问题来源        在实际项目开发中,页面如果内容很多,会出现滚动条,方便向下浏览,但是页面的标题头也会随下拉操作而无法看到,那如果我们想让下拉过程中标题仍在页面最顶端固定浮动显示,我们该如何做呢? 2、解决方法       使用css进行位置控制,然后结合jquery来处理滚动事件添加样式。
1037 0
|
.NET
asp.net table表格表头及列固定实现
在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1、2列就看不见了,于是需求就出来了,就是需要固定table的表头和列。
1411 0
|
JavaScript 前端开发 .NET
asp.net Repeater控件内容上下滚动播放
CSDN上的一个问题,已帮忙解决的,源码如下: var timer $(document).
886 0
|
.NET 索引 开发框架
【转】ASP.NET中服务器控件Table动态生成表格及其属性介绍
下文所有内容转自开源中国:http://www.oschina.net/question/565065_86453#tags_nav ============================================================================= ASP.
1075 0
|
JavaScript 前端开发 .NET
关于asp:GridView和dx:ASPxGridView固定表头的jquery代码封装
前几天有个项目要实现dx:ASPxGridView固定表头,就翻看了网上实现的方法。总结了一些方法。废话不多,先上个图,有图有真相           图1,dx:ASPxGridView的上面还有其他元素     图2    这是基于dx:ASPxGridView固定表头。
1282 0