问题
Browser - IE 9
Using the Latest Version of Microsoft's AdventureWorks2012 sandbox database (AdventureWorks2012_Data.zip) for SQL related Data.
I had to put this project on the backburner a few months ago due to various job interrupts and whatnot. What I'm looking for is a GridView that when it loads has a frozen header while the enduser scrolls the large amounts of data. Where I left off was a product that, upon first load would look good but when the data was scrolled the header I want frozen would scroll up along with the data.
Now the SQL Data is solid and performs as expected. This is mainly a cosmetic challenge that I've been scratching my head over for a bit. I've attempted to tweak every possible ASP/CSS/Javascript option that I know of with no success.
Here's what I've got so far code wise (no C# page behind leveraged at all):
<%@ 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>
As much as I'd like a solution for this, I would like more to learn why this page isn't behaving as designed. I know the solution may be something simple I overlooked but I'd like to learn the theory behind fixing it as well.
Here's the latest result with the suggestions from @afzalulh The white space is a blank header without any sort of text at all.
回答1:
You are almost there. You should name the javascript function Onscrollfnction().
EDIT:
- You replace the HeaderDiv content with tr html.
- You have to apply style to HeaderDiv.
Here's the script:
</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>
Further improvements:
I would apply fixed width to GridView Columns and apply the widths to headers in the HeaderDiv column headers.
I would hide the GridView's header and display the HeaderDiv instead, to avoid the annoying transition in the beginning of scrolling.
回答2:
I got frustruated with trying to find a javascript solution so I found one that is CSS based and works perfectly. For anyone who needs it moving forward, here's the article I referenced.
Scrollable GridView With Fixed Headers Asp.Net
来源：https://stackoverflow.com/questions/22949469/gridview-freeze-pane-header-not-freezing-after-page-loads