Question

浏览器 - IE 9

将最新版本的Microsoft's AdventureWorks2012 sandbox database（AdventureWorks2012_Data.zip）用于SQL相关数据。

几个月前，由于各种工作中断和诸如此类的原因，我不得不把这个项目放在后面。我正在寻找的是一个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的建议的最新结果。空格是一个空白标题，根本没有任何文字。

Blank Frozen Header

Answer 1

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

修改

用tr html替换HeaderDiv内容。

您必须将样式应用于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 相反，避免在开始时的烦人过渡滚动。

Answer 2

我试图找到一个javascript解决方案，因此我找到了一个基于CSS并且工作完美的解决方案。对于任何需要它向前发展的人来说，这是我引用的文章。

Scrollable GridView With Fixed Headers Asp.Net

Gridview冻结窗格标题在页面加载后没有冻结

2 个答案: