Question

浏览器 - IE 9

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

幕后没有使用C＃页面

首先，SQL没有问题，或者GridView中的SQL数据是如何提出的（除了冻结标题）

我正在尝试确定为什么我为嵌入在面板中的GridView设置的Frozen头部移动时，只要鼠标悬停在标题上或“编辑”链接上，我就会移动鼠标滚动设置在每行的开头和结尾。

行为是：

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

场景2 - 鼠标在滚动时悬停在冻结的标题上 - 作为我尝试过的事情之一，我想将编辑链接切换到按钮，看看是否能解决问题。使用鼠标悬停在“编辑”按钮上滚动GridView对标题完全没有影响。标题保持原位并按所述方式工作。滚动鼠标悬停在数据区域中，并且镶嵌的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>

我所看到的样本：

enter image description here

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，这是Code Behind中ClientId的{{1}}属性

我确定这是一种更简单的方法，可能会制作容器Panel和标题position:relative或position:relative，所以任何人都会想出一些没有＃＆＃的东西39; t要求包含在CSS中的容器名称更具可重用性。

当鼠标悬停在“编辑”上时，Gridview中的CSS Frozen Header向上滚动。链接

1 个答案: