c# - 当鼠标悬停在 'Edit' 链接上时，Gridview 中的 CSS Frozen Header 会向上滚动

Question

浏览器 - IE 9

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

没有在幕后使用 C# 页面

首先，SQL 或 GridView 中 SQL 数据的呈现方式(除了 Frozen Header 之外)没有零问题

我正在尝试确定为什么我为面板中嵌入的 GridView 设置的这个 Frozen 标题在鼠标悬停在标题或我拥有的“编辑”链接上时随鼠标滚动移动在每一行的开头和结尾设置。

行为是:

场景 1 - 滚动时鼠标悬停在编辑链接上 - 当我将鼠标悬停在“编辑”链接上并使用鼠标向上或向下滚动时，卡住的标题会随着鼠标滚动向上移动。但是，如果鼠标悬停在 GridView 的数据区域中，标题将保持卡住状态。当我将鼠标悬停在标题上然后上下滚动时，标题保持在原位。当我在向上和向下滚动后将鼠标从 Frozen Header 上移开时，标题要么重新出现在页面顶部，要么完全消失。在 header 完全消失的情况下，将鼠标悬停在“编辑”链接上会使 header 恢复原位。

场景 2 - 滚动时鼠标悬停在卡住的标题上 - 作为我尝试过的事情之一，我想将编辑链接切换到按钮，看看是否可以解决问题。鼠标悬停在“编辑”按钮上滚动 GridView 对标题根本没有影响。 header 保留在原位并按说明工作。将鼠标悬停在数据区域中滚动，面板 GridView 中的 Frozen Header 保持卡住状态。但是，当我将鼠标悬停在标题上然后上下滚动时，标题保持在原位。当我在向上和向下滚动后将鼠标从 Frozen Header 上移开时，标题要么重新出现在页面顶部，要么完全消失。

这是场景 1 的代码。如果需要更多代码，请告诉我。

CSS

.header-frozen
      {
       font-weight: bold;
       background-color: white;
       position: relative;
       visibility: visible;
      }

ASP.NET

<div >
            <asp:Panel  ID="Panel1"  Height="600px" Width="9000px" ScrollBars="Vertical" runat="server">



<asp:GridView ID="GridView1" Width="100%" Height="600px"  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" ForeColor="White"></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>
  <HeaderStyle CssClass="header-frozen" Height="60px" />
    <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>



    <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>
                </asp:Panel>
    </div>

我所看到的示例:

Answer 1

以下答案尚未经过测试，但可能有助于某人创建有效的回复。

您使用的方法似乎是基于以下文章:

http://www.dotnetbips.com/articles/f1baaf4e-ae5a-46d6-b409-03e203ea98d9.aspx

上述文章也被 ASP.NET 论坛上的以下问题引用，该论坛还提供了替代解决方案:

http://forums.asp.net/t/1213517.aspx?How+to+fix+the+gridview+header+while+scrolling

总而言之，我认为修复实现的一般工作方式如下:

1) 将 GridView 移动到容器元素中(您似乎已经在一定程度上完成了此操作)

<div id="gridviewContainer" style="overflow-x: hidden; overflow: scroll; width: 100%; height:350px">
    <asp:GridView  ...>
        <HeaderStyle CssClass="header-frozen" />
    </asp:GridView>
</div>

2) 使用表达式定义 CSS 中的位置

.header-frozen{
    position: relative;
    top: expression(gridviewContainer.scrollTop-5);
}

您应该注意，您创建的 asp:Panel 的 ID 将与 CSS 具有不同的 ID，这是 ClientId 属性代码隐藏中的面板

我确定有更简单的方法，可能使容器 position:relative 和 header position:relative 或 position:absolute所以任何想出不需要包含在 CSS 中的容器名称的东西的人都更可重用。