gridview的冻结窗格页面加载后头球攻门不冻 [英] Gridview Freeze Pane header not freezing after page loads
问题描述
浏览器 - IE 9
使用微软的AdventureWorks2012沙箱数据库的最新版本（ AdventureWorks2012_Data.zip）相关数据的SQL。
Using the Latest Version of Microsoft's AdventureWorks2012 sandbox database (AdventureWorks2012_Data.zip) for SQL related Data.
我只好把这个项目上的次要地位在几个月前，由于各种工作中断和诸如此类的东西。我正在寻找的是一个GridView，当它加载有冻结的标题，而终端用户滚动大量的数据。在那里我离开是一个产品，在第一次加载会好看，但是当数据已滚动我想冻结将与数据一起向上滚动的标题。
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.
现在预期的SQL数据是坚实的执行。这主要是，我一直在抓我的头有点化妆品的挑战。我试图调整每一个可能的ASP / CSS / JavaScript的，我知道没有成功的选择。
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.
下面就是我走到这一步，code明智的（后面没有C＃页面杠杆的话）：
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.
下面是从@afzalulh白色空间是没有任何类型的文本在所有的空白标题的建议的最新结果。
Here's the latest result with the suggestions from @afzalulh The white space is a blank header without any sort of text at all.
推荐答案
您几乎没有。你应该命名为javascript函数 Onscrollfnction（）。
You are almost there. You should name the javascript function 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列标题头。
I would apply fixed width to GridView Columns and apply the widths to headers in the HeaderDiv column headers.
我就躲在GridView的头和显示HeaderDiv
相反，为了避免在开始的烦人过渡
滚动。
I would hide the GridView's header and display the HeaderDiv instead, to avoid the annoying transition in the beginning of scrolling.
这篇关于gridview的冻结窗格页面加载后头球攻门不冻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
