GridView 固定表头

引言

Gridview 是一个很好的控件，它使我们能够在 webforms 中生成类似 Excel 的输出。我们有一个场景，我们需要为 Gridview 提供类似冻结窗格的功能。我们有一个很长的 Grid，大约有 20 或 30 列。我们每页有大约 20 条记录的分页。因此，以下是需求

1. Grid 必须有固定的表头。
2. 它应该是可以水平滚动的。
3. 它应该是可以垂直滚动的。

背景

您可以通过以下链接了解更多关于 gridview 的信息

• GridView 文档 
• 固定表头问题...

Using the Code

我做了很多搜索，但只能找到在列数有限的情况下有效的解决方案。因此，我做了一个小的研发，并得出了一个解决方案，我现在将分享它。以 Timesheet 应用程序为例，它有一个 Grid。我们将为这个 Grid 提供固定表头功能。GridView 将如下所示

<asp:GridView ID="grdTask" runat="server" GridLines  ="Both"    Width ="100%"  > 
            <!-- Some column Definitions--> 
</asp:GridView> 

我们要做的第一件事是将这个 Grid 移动到 Div 标签中。

<div  id = "AdjResultsDiv"> 
<asp:GridView ID="grdTask" runat="server" GridLines  ="Both"    Width ="100%"  > 
            <!-- Some column Definitions--> 
</asp:GridView>
</Div>

假设我们有一个样式表文件 "Style.Css"。请使用基于 ID 的样式为 Div 添加以下样式。您也可以使用基于类的样式。

div#MyGrid { 
width: 1080px; 
height: 500px; 
overflow: scroll; 
position: relative; 
}

上面的代码将确保以下几件事

1. 我们可以定义我们正在使用的 Div 的高度和宽度。
2. 我们可能需要或不需要使用 Overflow 属性的滚动条。
3. 将 Position 设置为 relative 使 Div 相对于其父级。

接下来将是 Grid 的样式。默认情况下，grid 将呈现为一个具有默认 Div 标签的表，如下所示

<div> 
<table ......   

因此，当您在 Grid 之前添加 Div 标签时，它将呈现为

<div id = "AdjResultsDiv">

<div> 
<table ...... 

所以我们的样式应该相应地设计。我在下面给出了 Grid 样式

div#MyGrid th 
{   
top: expression(document.getElementById("AdjResultsDiv").scrollTop-2); 
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); 
position: relative; 
z-index: 20; 
} 

以下是功能

1. 给出 TH 标签的 Top 和 Left 坐标，该标签将为 Grid 内部的表头生成。我们使用表达式标签通过 JavaScript 动态分配值。
2. 将 Grid 相对放置在 Div 标签内部。如果未设置此属性，则表头将超出 Div 框。
3. 设置 Grid 的 Z-Index。z-index 属性设置元素的堆叠顺序。因此，根据顺序，它们将被放置在前面。

因此，在样式表中添加以下内容

div#AdjResultsDiv { 
width: 1080px; 
height: 500px; 
overflow: scroll; 
position: relative; 
}

div#AdjResultsDiv th {   
top: expression(document.getElementById("AdjResultsDiv").scrollTop-2); 
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); 
position: relative; 
z-index: 20; 
} 

并将 Grid 放入 Div 标签中。就这样。您现在已准备好为 Grid 提供固定表头。

关注点

在制作此功能时，我注意到一件非常有趣的事情。最初我得到了一大堆样式并尝试使用它们。但是 Gridview 没有显示固定表头。因此，我对 position Relative 概念进行了一个小的分析，并将其智能地用于 Div 标签和 Grid 的 Table。

历史

• 2009年5月7日：初始发布

我将保持此帖子的更新，以了解 GridView 的固定列。