滚动gridview时是否可以显示标题答案

【问题标题】：Is it possible to show headers while scrolling the gridview滚动gridview时是否可以显示标题
【发布时间】：2011-09-03 06:11:29
【问题描述】：

我在我的应用程序中使用 Gridview。网格视图通过一些标题文本与来自数据库的数据绑定。现在我想要的是当我滚动网格视图时我想在移动网格视图时显示标题我该怎么做

这是我写的McArthey

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link href="StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px">                
    <asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true">                    
        <columns>
            <asp:BoundField DataField="id" HeaderText="id" HeaderStyle-Width="60" ItemStyle-Width="60" />
        </columns>
    </asp:GridView>
</asp:Panel>
    </div>
    </form>
</body>
</html>

stylesheet如下

TABLE.gvTable
{
    table-layout:fixed;
}
TABLE.gvTable TH
{    
    position:relative;
    border-top-width:0px;
    border-bottom-color:Black;
    background-color:#F5DEB3;
}

这是我运行并单击查看源代码时的示例源代码

  <div id="pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;">
 <div>
 <table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="gvTheGrid" style="border-collapse:collapse;">
 <tr>
<th scope="col" style="width:60px;">id</th>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>

页面加载时显示的标题

向下滚动时没有标题

【问题讨论】：

查看以下链接：stackoverflow.com/questions/296020/…cubido.at/blogs/Lists/Posts/Post.aspx?ID=1259
无法查看或下载内容使用我该怎么办

标签： c# asp.net gridview .net-2.0

【解决方案1】：

有一个示例 here 可以在 IE8 上运行。

这对我非常有用，因为我们正在工作中迁移到 IE8，我需要让它工作。

使用此解决方案有一些技巧。它希望使用默认情况下不会在 GridView 中呈现的 <thead> 和 <tbody> 标记。为了呈现它们，您需要按照其他人之前建议的以下内容添加一些内容。

// will add <thead> and <tbody>
gvTheGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

我有一个基于我通过电子邮件发送的链接的示例解决方案。

【讨论】：

所以他用<script>来代替我们放置网格可以吗
这是一个结合了 CSS 和 JS 的解决方案，所以它有点复杂，但如果你遇到困难，该网站会提供非常详细的文档和论坛。

【解决方案2】：

简单的解决方案是使用 .

包装 ItemTemplate（您可以使用模板列）的内容。

<ItemTemplate>
 <div style="height:100px; overflow:scroll">
   .....
 </div>
</ItemTemplate>

看看 CodeProject 文章：Scrollable GridView.

【讨论】：

【解决方案3】：

这就是我们的做法。

创建具有给定高度的 asp 面板并指定垂直滚动条
把gridview放到panel里面，给它一个class 我的网格视图
在 CSS 中创建以下样式

TABLE.myGridView { 表格布局：固定； }
TABLE.myGridView TH {位置：相对； }
像这样指定每个 asp:BoundField 的宽度：

HeaderStyle-Width="85" ItemStyle-Width="85"

下面是后面的代码示例：

<asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px">                
    <asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true">                    
        <columns>
            <asp:BoundField DataField="C" HeaderText="C" HeaderStyle-Width="60" ItemStyle-Width="60" />
        </columns>
    </asp:GridView>
</asp:Panel>

这是 CSS：

TABLE.gvTable
{
    table-layout:fixed;
}
TABLE.gvTable TH
{    
    position:relative;
    border-top-width:0px;
    border-bottom-color:Black;
    background-color:#F5DEB3;
}

这是生成的 HTML：

<div id="ctl00_MainContent_pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;">
<div>
<table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="ctl00_MainContent_gvTheGrid" style="background-color:WhiteSmoke;border-collapse:collapse;">
<tr style="font-size:Medium;">
<th scope="col" style="width:60px;">Select One</th>
<th scope="col" style="width:60px;">Number</a></th>
<th scope="col" style="width:60px;">Address</a></th>
<th scope="col" style="width:200px;">Phone</a></th>
</tr>
</table>
</div>               
</div>

您可以看到代码/生成源之间的 CSS 匹配的类。

HTH

【讨论】：

你能把你使用的设计和css贴出来吗，我没有得到你说的那个
在任何浏览器上都不起作用我在滚动时无法看到标题
让我们看看你的代码。我现在正在查看应用程序，它在这里工作。我们在 IE7 上。如果有帮助，我可以将生成的源粘贴到消息中。
@User：我认为 McArthey 的解决方案对您不起作用，因为您可能没有告诉 GridView 在表头上呈现 TH 标签。在后面的代码中执行此操作： yourGrid.HeaderRow.TableSection = TableRowSection.TableHeader; McArthey 的解决方案应该适合您。
@User 您是否在 BoundField 或 Template 中指定了适当的标题标签？