页面加载后Gridview冻结窗格标题未冻结答案

【问题标题】：Gridview Freeze Pane header not freezing after page loads页面加载后Gridview冻结窗格标题未冻结
【发布时间】：2014-05-21 21:11:40
【问题描述】：

浏览器 - IE 9

对 SQL 相关数据使用最新版本的 Microsoft's AdventureWorks2012 sandbox database (AdventureWorks2012_Data.zip)。

几个月前，由于各种工作中断等等，我不得不把这个项目搁置一旁。我正在寻找的是一个 GridView，当它加载时有一个冻结的标题，而最终用户滚动大量数据。我离开的地方是一个产品，它在第一次加载时看起来不错，但是当滚动数据时，我想要冻结的标题会随着数据一起向上滚动。

现在 SQL 数据已稳定并按预期执行。这主要是一个外观挑战，我一直在摸索。我试图调整我所知道的所有可能的 ASP/CSS/Javascript 选项，但没有成功。

这是我目前在代码方面所掌握的内容（根本没有利用 C# 页面）：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="sample.aspx.cs" Inherits="sample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="<path to>/jquery-2.0.3.min.js"></script>  
<script src="<path to>/jquery-2.0.3.js"></script> 
</head>
<body>
<form id="form1" runat="server">
<div>
        <script type="text/javascript">
            $(function () {
            var header = $("#GridView1").find("tr")[0];
            $("#HeaderDiv").append(header);
        });
</script>
<style type="text/css">



    .GridViewStyle
    {    
        font-family:Verdana;
        font-size:11px;
        background-color: White; 
    }

    .GridViewHeaderStyle
    {
        font-family:Verdana;
        font-size:15px;
        background-color:#507CD1;
        color:black;
        height:40px;

    }


</style>

<br />

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks2012ConnectionString %>" SelectCommand="SELECT [BusinessEntityID],[NationalIDNumber],[LoginID],[OrganizationNode],[OrganizationLevel],[JobTitle],[BirthDate],[MaritalStatus],[Gender],[HireDate],[SalariedFlag],[VacationHours],[SickLeaveHours],[CurrentFlag],[rowguid],[ModifiedDate] FROM [HumanResources].[Employee]" UpdateCommand="UPDATE [HumanResources].[Employee] SET SELECT [NationalIDNumber] = @NationalIDNumber,[LoginID] = @LoginID,[OrganizationNode] = @OrganizationNode,[OrganizationLevel] = @OrganizationLevel,[JobTitle] = @JobTitle,[BirthDate] = @BirthDate,[MaritalStatus] = @MaritalStatus,[Gender] = @Gender,[HireDate] = @HireDate,[SalariedFlag] = @SalariedFlag,[VacationHours] = @VacationHours,[SickLeaveHours] = @SickLeaveHours,[CurrentFlag] = @CurrentFlag,[rowguid] = @rowguid,[ModifiedDate] = @ModifiedDate WHERE [BusinessEntityID] = @BusinessEntityID">
<UpdateParameters>
        <asp:Parameter Name="NationalIDNumber" />
        <asp:Parameter Name="LoginID" />
        <asp:Parameter Name="OrganizationNode" />
        <asp:Parameter Name="OrganizationLevel" />
        <asp:Parameter Name="JobTitle" />
        <asp:Parameter Name="BirthDate" />
        <asp:Parameter Name="MaritalStatus" />
        <asp:Parameter Name="Gender" />
        <asp:Parameter Name="HireDate" />
        <asp:Parameter Name="SalariedFlag" />
        <asp:Parameter Name="VacationHours" />
        <asp:Parameter Name="SickLeaveHours" />
        <asp:Parameter Name="CurrentFlag" />
        <asp:Parameter Name="rowguid" />
        <asp:Parameter Name="ModifiedDate" />
        <asp:Parameter Name="BusinessEntityID" />
</UpdateParameters>

</asp:SqlDataSource>


      <div>
        <%--Div contains the new header of the GridView--%>
        <div id="HeaderDiv">

        </div>

              <%--Wrapper Div which will scroll the GridView--%>
        <div id="DataDiv" style="overflow: auto; border: 1px solid olive; width: 2000px; height: 300px;" onscroll="Onscrollfnction();">
<asp:GridView ID="GridView1"  runat="server" AllowSorting="True" HeaderStyle-CssClass="GridViewStyle"  AutoGenerateColumns="False"  DataKeyNames="BusinessEntityID" DataSourceID="SqlDataSource1"  ForeColor="#333333" GridLines="None">
    <HeaderStyle CssClass="GridViewHeaderStyle" />
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:CommandField ShowEditButton="True" />
        <asp:BoundField HeaderStyle-CssClass="GridViewHeaderStyle"  HeaderStyle-BackColor="#507CD1" DataField="BusinessEntityID" HeaderText="Business Entity ID" ReadOnly="True" SortExpression="BusinessEntityID" InsertVisible="False" ShowHeader="False" >
<HeaderStyle BackColor="#507CD1" CssClass="GridViewHeaderStyle"></HeaderStyle>
        </asp:BoundField>
        <asp:BoundField DataField="NationalIDNumber" HeaderText="National ID #" SortExpression="NationalIDNumber" ShowHeader="False" />
        <asp:BoundField DataField="LoginID" HeaderText="Login ID" SortExpression="LoginID" ShowHeader="False" />
        <asp:BoundField DataField="OrganizationNode" HeaderText="Organization Node" SortExpression="OrganizationNode" ShowHeader="False" />
        <asp:BoundField DataField="OrganizationLevel" HeaderText="Organization Level" SortExpression="OrganizationLevel" ShowHeader="False" />
        <asp:BoundField DataField="JobTitle" HeaderText="Job Title" SortExpression="JobTitle" ShowHeader="False" />
        <asp:BoundField DataField="MaritalStatus" HeaderText="Marital Status" SortExpression="MaritalStatus" ShowHeader="False" />
        <asp:BoundField DataField="HireDate" HeaderText="Hire Date" SortExpression="HireDate" ShowHeader="False" />






        <asp:BoundField DataField="SalariedFlag" HeaderText="Salaried Flag" SortExpression="SalariedFlag" ShowHeader="False" />



        <asp:BoundField DataField="VacationHours" HeaderText="Vacation Hours" SortExpression="VacationHours" InsertVisible="False" ReadOnly="True" ShowHeader="False" />



        <asp:BoundField DataField="CurrentFlag" HeaderText="Current Flag" SortExpression="CurrentFlag" ShowHeader="False" />
        <asp:BoundField DataField="rowguid" HeaderText="Row Guid" SortExpression="rowguid" ShowHeader="False" />
        <asp:BoundField DataField="ModifiedDate" HeaderText="Modified Date" SortExpression="ModifiedDate" ShowHeader="False" />

        <asp:CommandField ShowEditButton="True" />
    </Columns>
    <EditRowStyle BackColor="#2461BF" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#EFF3FB" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />

    <SortedAscendingCellStyle BackColor="#F5F7FB" />
    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
    <SortedDescendingCellStyle BackColor="#E9EBEF" />
    <SortedDescendingHeaderStyle BackColor="#4870BE" />
    </asp:GridView>
            </div>
          </div>
</div>
</form>
</body>
</html>

尽管我很想为此提供解决方案，但我想更多地了解为什么此页面的行为不符合设计。我知道解决方案可能很简单，我忽略了，但我也想了解修复它背后的理论。

这是来自@afzalulh 建议的最新结果空白是一个空白标题，根本没有任何文本。

【问题讨论】：

标签： javascript asp.net css gridview sql-server-2012

【解决方案1】：

你快到了。您应该将 javascript 函数命名为 Onscrollfnction()。

编辑：

您将 HeaderDiv 内容替换为 tr html。
您必须将样式应用于 HeaderDiv。

这是脚本：

</style><script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
    function Onscrollfnction() {
        var header = $("#GridView1").find('tr:first').html();
        $("#HeaderDiv").html(header);
        $("#HeaderDiv").addClass("GridViewHeaderStyle");
    }
</script>

进一步改进：

我会将固定宽度应用于 GridView 列并应用宽度到 HeaderDiv 列标题中的标题。
我会隐藏 GridView 的标题并显示 HeaderDiv 相反，为了避免开头的烦人的过渡滚动。

【讨论】：

感谢您的帮助，但尝试此操作后，它没有解决任何问题。结果相同。
可能你忘了用 jquery 的物理路径替换 this<path to>。我在发布之前已经测试了上面的代码并且我使用了这个路径：<script src="//code.jquery.com/jquery-1.10.2.js"></script>.
好的，我试试看。
我试过了，冻结窗格按我的意愿工作，但所有标题信息都丢失了。列标题应该是空白的地方。没有文字，没有链接，什么都没有。
我上传了一张图片，其中包含我在该主题的第一篇文章中看到的内容。

【解决方案2】：

我对试图找到一个 JavaScript 解决方案感到沮丧，所以我找到了一个基于 CSS 并且可以完美运行的解决方案。对于任何需要它的人，这是我参考的文章。

Scrollable GridView With Fixed Headers Asp.Net

【讨论】：