65.9K
CodeProject 正在变化。 阅读更多。
Home

滚动 Gridview 时保持滚动位置

tomcat1
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.64/5 (17投票s)

2008 年 9 月 24 日

CPOL

3分钟阅读

viewsIcon

172108

downloadIcon

4949

在本文中，我将使 Gridview 控件拥有滚动条，它可以在服务器回发（AJAX）和非服务器回发之间保持滚动位置，同时顶部还有一个固定标题。

引言

在本文中，我将使 gridview 控件拥有滚动条，它可以在服务器回发（AJAX）和非服务器回发之间保持滚动位置，同时顶部还有一个固定标题。

背景

Gridview 是网页中非常常见的控件之一，但存在一些不令人愉快的行为。Gridview 没有滚动条，我更倾向于垂直滚动条，这样我的页面就不会无限长。即使添加滚动条（使用 div 标签），滚动位置也不会被保留，因此回发后网格会重新定位到第一行，AJAX 更新面板刷新也是如此。如果 gridview 中有许多行无法显示在屏幕上，那会非常令人烦恼。

现在，如果我使用 div 标签添加滚动条，标题列会向上滚动，这对我来说是另一个不喜欢的特性。尽管这是三个不同的问题，但它们都相互关联，并且都期望能够使 gridview 成为一个理想的控件。当然，如果您不介意额外的依赖项，也有许多第三方网格。

Using the Code

代码使用 Visual Studio 2008 编写，通过一些简单的修改应该可以在 Visual Studio 2005 中运行。代码是用 C# 和 JavaScript 编写的。

下载代码并编译，使用文件系统而不是本地 IIS 来避免创建虚拟目录。对于Ajax，将 ScrollWAjax.aspx 设置为默认页面，否则将 ScrollWOAjax.aspx 设置为启动页。

代码不连接任何数据库，因此任何拥有 Visual Studio 2008 的人都可以运行，无需任何更改或设置。

关注点

本文解释了这三点，我会尽量将它们分开以便于参考。

  • 滚动条
  • 保持位置
  • 顶部固定标题

滚动条

这是所有三个中最简单的，可以使用 div 标签添加，并且每个人都熟悉这个老牌标签。

<div id="divdatagrid1" style="width: 85%; overflow:scroll;
    height: 202px;" onscroll='javascript:setScroll(this, <% =scrollPos.ClientID %> );'>

Id 很重要，因为它在 GridStyleSheet.css 样式表中指定了一些特殊行为。所以如果你改变 Id，那么请在搜索和替换中将 id 替换为新的 id。需要 CSS 帮助？点击这里。

保持滚动位置

div 标签有一个 Onscoll 标签，它为 onscroll 事件指定了 JavaScript 事件。JavaScript 包含在 scroll.js 文件中。滚动位置保存在 scrollPos 隐藏变量中，回发后，使用 scrollTop 属性将 gridview 设置到保存的滚动位置。由于回发，这有点棘手，但你可以使用 JavaScript 调试器单步执行代码以便清晰理解。

<input id="scrollPos" runat="server" type="hidden" value="0" />

用于保持位置的其余代码在 CS 文件中，用于注册页面的客户端 JavaScript 代码。

Ajax 页面 ScrollWAjax.aspx 在 beginrequest 事件和 pageloaded 事件中包含了脚本代码，这仅适用于AJAX 代码以处理客户端回发。

ScrollWAjax.aspx 中的 JavaScript 代码使用的 $get 与 getElementById 方法相同。你可以使用这个新的快捷方式来简化代码。

在没有 AJAX 支持的情况下，你需要以下两个函数来保存和设置滚动位置：

function setScroll(val, posId) {
posId.value = val.scrollTop;
}
//only required for w/o ajax page ScrollWOAjax.
function scrollTo(what, posId) {
if (what != "0")
document.getElementById(what).scrollTop = document.getElementById(posId).value;
}  

如果你想学习 JavaScript，点击这里。

顶部固定标题

我很久以前就有这个功能了，它仍然适用于 .NET 和 Visual Studio 2008。诀窍在于 gridStyleSheet.css 文件。

/* Locks table header */
div#divdatagrid1 th {
/*text-align: center;*/
background-color:Aqua;
color: white;
position:relative;
cursor: default;
: expression(document.getElementById("divdatagrid1").scrollTop-2); /*IE5+ only*/
z-index: 10;
}

在 th (tableheader) 标签中指定的顶部 expression 标签定义了标题的顶部位置，在滚动 gridview 中的行时，标题位置保持在顶部。div 标签中指定的 id 在这里使用，并且 id 必须匹配才能使其工作。

CSS 表达式.

尽管我不是微软的员工，但现在我让你至少在简单任务中使用 gridview，并避免使用第三方网格。

祝好！

历史

  • 2008 年 9 月 24 日：初次发布
© . All rights reserved.