Question

我在我的应用程序中使用Gridview。网格视图与来自数据库的数据捆绑在一起，带有一些标题文本。现在我想要的是当我滚动网格视图时我想在移动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>

页面加载时显示的标题

enter image description here

向下滚动时没有标题

enter image description here

Answer 1

简单的解决方案是使用。

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

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

查看CodeProject文章：Scrollable GridView.

Answer 2

有一个适用于IE8的示例here。

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

使用此解决方案有一些技巧。它希望使用GridView中默认不呈现的<thead>和<tbody>标记。为了渲染它们，你需要在下面的行中添加一些东西，这是前面提到的。

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

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

Answer 3

以下是我们如何做到的。

创建一个具有给定高度的asp面板并指定垂直滚动条
将gridview放在面板中并给它一类 myGridView
创建以下样式

TABLE.myGridView { 表格的布局：固定; }
TABLE.myGridView TH {position：relative; }
指定每个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

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

3 个答案: