浏览器 - 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 的建议得出的最新结果。空白是完全没有任何文本的空白标题。
最佳答案
你快到了。您应该将 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 的 header 并显示 HeaderDiv 相反，为了避免开始时烦人的过渡 滚动。
关于javascript - 页面加载后 Gridview 卡住 Pane 标题未卡住，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22949469/