Gridview冻结窗格标题在页面加载后不会冻结 [英] Gridview Freeze Pane header not freezing after page loads

查看：384
本文介绍了Gridview冻结窗格标题在页面加载后不会冻结的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

浏览器 - IE 9



使用最新版本 Microsoft的AdventureWorks2012沙箱数据库（AdventureWorks2012_Data.zip）SQL相关数据。

我不得不把这个项目放在backburner几个月前，由于各种工作中断和什么。我正在寻找的是一个GridView，当它加载时有一个冻结的头，而最终用户滚动大量的数据。我离开的地方是一个产品，在第一次加载看起来不错，但当数据滚动的标题，我想冻结将向上滚动与数据。



现在SQL数据是固定的，并按预期执行。这主要是一个化妆品的挑战，我一直在抓我的头一会儿。我试图调整我知道的每一个可能的ASP / CSS / JavaScript选项没有成功。



这里是我到目前为止的代码明智（没有C＃ page under leveraged at all）：

 <％@ Page Language =C＃AutoEventWireup =trueCodeFile =sample .aspx.csInherits =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 =form1runat =server> 
< div> 
< script type =text / javascript> 
 $（function（）{
 var header = $（＃GridView1）。find（tr）[0]; 
 $（＃HeaderDiv）。 ）; 
}）; 
< / 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 =SqlDataSource1runat =serverConnectionString =<％$ ConnectionStrings：AdventureWorks2012ConnectionString％> SelectCommand =SELECT [BusinessEntityID]，[NationalIDNumber]，[LoginID]，[OrganizationNode]，[OrganizationLevel]，[JobTitle]，[BirthDate]，[MaritalStatus]，[Gender]，[HireDate]，[SalariedFlag] ] [SELECT] [USERID] = [NONEIDNumber，[LoginID]]，[SickLeaveHours]，[CurrentFlag]，[rowguid]，[ModifiedDate] FROM [HumanResources] @Group，[Gender] = @Gender，[HireDate] = @OrganizationNode，[OrganizationName] = @OrganizationNode，[OrganizationLevel] = @OrganizationLevel，[JobTitle] = @JobTitle，[BirthDate] = @BirthDate，[MaritalStatus] 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：参数名称=性别/> 
< 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包含GridView的新标题 - ％> 
< div id =HeaderDiv> 
 
< / div> 
 
<％ -  Wrapper Div将滚动GridView  - ％> 
< div id =DataDivstyle =overflow：auto; border：1px solid olive; width：2000px; height：300px; onscroll =Onscrollfnction（）;> 
< asp：GridView ID =GridView1runat =serverAllowSorting =TrueHeaderStyle-CssClass =GridViewStyleAutoGenerateColumns =FalseDataKeyNames =BusinessEntityIDDataSourceID =SqlDataSource1ForeColor = 333333GridLines =None> 
< HeaderStyle CssClass =GridViewHeaderStyle/> 
< AlternatingRowStyle BackColor =White/> 
< Columns> 
< asp：CommandField ShowEditButton =True/> 
< asp：BoundField HeaderStyle-CssClass =GridViewHeaderStyleHeaderStyle-BackColor =＃507CD1DataField =BusinessEntityIDHeaderText =Business Entity IDReadOnly =TrueSortExpression =BusinessEntityIDInsertVisible =False ShowHeader =False> 
< HeaderStyle BackColor =＃507CD1CssClass =GridViewHeaderStyle>< / HeaderStyle> 
< / asp：BoundField> 
< asp：BoundField DataField =NationalIDNumberHeaderText =National ID＃SortExpression =NationalIDNumberShowHeader =False/> 
< asp：BoundField DataField =LoginIDHeaderText =Login IDSortExpression =LoginIDShowHeader =False/> 
< asp：BoundField DataField =OrganizationNodeHeaderText =OrganizationNodeSortExpression =OrganizationNodeShowHeader =False/> 
< asp：BoundField DataField =OrganizationLevelHeaderText =Organization LevelSortExpression =OrganizationLevelShowHeader =False/> 
< asp：BoundField DataField =JobTitleHeaderText =Job TitleSortExpression =JobTitleShowHeader =False/> 
< asp：BoundField DataField =MaritalStatusHeaderText =Marital StatusSortExpression =MaritalStatusShowHeader =False/> 
< asp：BoundField DataField =HireDateHeaderText =Hire DateSortExpression =HireDateShowHeader =False/> 
 
 
 
 
 
 
 
 
< asp：BoundField DataField =SalariedFlagHeaderText =Salaried FlagSortExpression =SalariedFlagShowHeader =False/> 
 
 
 
< asp：BoundField DataField =VacationHoursHeaderText =Vacation HoursSortExpression =VacationHoursInsertVisible =FalseReadOnly =TrueShowHeader = False/> 
 
 
 
< asp：BoundField DataField =CurrentFlagHeaderText =Current FlagSortExpression =CurrentFlagShowHeader =False/& 
< asp：BoundField DataField =rowguidHeaderText =Row GuidSortExpression =rowguidShowHeader =False/> 
< asp：BoundField DataField =ModifiedDateHeaderText =Modified DateSortExpression =ModifiedDateShowHeader =False/> 
 
< asp：CommandField ShowEditButton =True/> 
< / Columns> 
< EditRowStyle BackColor =＃2461BF/> 
< FooterStyle BackColor =＃507CD1Font-Bold =TrueForeColor =White/> 
 
< PagerStyle BackColor =＃2461BFForeColor =WhiteHorizo​​ntalAlign =Center/> 
< RowStyle BackColor =＃EFF3FB/> 
< SelectedRowStyle BackColor =＃D1DDF1Font-Bold =TrueForeColor =＃333333/> 
 
< SortedAscendingCellStyle BackColor =＃F5F7FB/> 
< SortedAscendingHeaderStyle BackColor =＃6D95E1/> 
< SortedDescendingCellStyle BackColor =＃E9EBEF/> 
< SortedDescendingHeaderStyle BackColor =＃4870BE/> 
< / asp：GridView> 
< / div> 
< / div> 
< / div> 
< / form> 
< / body> 
< / html>

就像我想要的解决方案一样，我想更多地了解为什么这个页面不符合设计。我知道解决方案可能是一些简单的我忽略了，但我想学习固定它的理论背后。



这是最新的结果与@afzalulh的建议



解决方案

您应该命名javascript函数 Onscrollfnction（）。



编辑： >


  1. 您用Tr html替换HeaderDiv内容。

  2. 您必须将样式应用于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>

进一步改进：


  1. 我将固定宽度应用于GridView列，并将宽度
    应用于HeaderDiv列标题中的标题。


  2. I将隐藏GridView的头部并显示HeaderDiv
    ，以避免在
    滚动开始时出现讨厌的过渡。



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.

解决方案

You are almost there. You should name the javascript function Onscrollfnction().

EDIT:

  1. You replace the HeaderDiv content with tr html.
  2. 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:

  1. I would apply fixed width to GridView Columns and apply the widths to headers in the HeaderDiv column headers.

  2. I would hide the GridView's header and display the HeaderDiv instead, to avoid the annoying transition in the beginning of scrolling.

这篇关于Gridview冻结窗格标题在页面加载后不会冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆