冻结的GridView头在ASP.NET？ [英] Freeze GridView Header in ASP.NET?

问题描述

我的GridView与15岁及以上的列，
我需要使用下面的CSS冻结在GridView的标题：

  .container
        {
            溢出：汽车;
        }
        / *保持放置在头细胞作为我们滚动* /
        .container表日
        {
           位置：相对;
        }
        / *滚动条的排列* /
        .container表TBODY
        {
            溢出 -  X：隐藏;
        }
 

电网滚动身体很好，但，
我的GridView标题不滚动的Y轴。

我的网格视图code如下。

 ＆LT; ASP：GridView控件ID =RadGrid1=服务器边框=无边框宽度=1像素
    网格线=两者的AutoGenerateColumns =真onrowcommand =OnSelectedChanged
    rowstyle换行=false的rowstyle-的CssClass =容器
    onrowdatabound =RadGrid1_RowDataBound的DataKeyNames =的DocID，DocumentName＆GT;
      ＆LT; headerstyle的CssClass =容器背景色=LightBlue包=假
          horizo​​ntalalign =中心verticalalign =中/＆GT;
      ＆LT; selectedrowstyle背景色=红包=FALSE/＆GT;
      ＆LT;列＆GT;
         ＆LT; ASP：的TemplateField＆GT;
            ＆LT;＆HeaderTemplate中GT;
               ＆LT;输入ID =chkAll的onclick =JavaScript的：SelectAllCheckboxes（本）;
                    =服务器类型=复选框/＆GT;
            ＆LT; / HeaderTemplate中＆GT;
            ＆LT;＆ItemTemplate中GT;
               ＆LT; ASP：复选框ID =chkSelect=服务器/＆GT;
            ＆LT; / ItemTemplate中＆GT;
         ＆LT; / ASP：的TemplateField＆GT;
         ＆LT; ASP：ButtonField字段按钮类型=链接的HeaderText =查看文本=查看的CommandName =查看/＆GT;
         ＆LT; ASP：ButtonField字段按钮类型=链接的HeaderText =活动文本=活动的CommandName =活动/＆GT;
      ＆LT; /列＆GT;
＆LT; / ASP：GridView的＆GT;
 

解决方案

文章：网格视图具有固定的头

<一个href=\"http://www.$c$cproject.com/Tips/65565/How-to-Freeze-GridView-Header-While-Scrolling.aspx#alternate1\"相对=nofollow>为GridView到FREEZ头

  DIV＃的GridPanel
{
   宽度：900px;
   溢出：滚动;
   位置：相对;
}
＃DIV的GridPanel日
{
   顶部：前pression（的document.getElementById（GridPanel中）scrollTop的-2）;
左：前pression（parentNode.parentNode.parentNode.parentNode.scrollLeft）;
   位置：相对;
   的z-index：20;
}
＆LT; ASP：面板ID =GridPanel中的=服务器HEIGHT =200像素WIDTH =100px的滚动条=自动＆GT;
   asp.net网格视图
 

I have gridview with 15 and above columns, I need to freeze the header of the gridview using the following css :

  .container
        {
            overflow: auto;
        }
        /* Keep the header cells positioned as we scroll */
        .container table th
        {
           position: relative; 
        }
        /* For alignment of the scroll bar */
        .container table tbody
        {
            overflow-x: hidden;
        }

body of the grid scroll well but, my gridview header is not scrolled on y axis.

my grid view code as follow.

<asp:gridview id="RadGrid1" runat="server" borderstyle="None" borderwidth="1px"
    gridlines="Both" autogeneratecolumns="true" onrowcommand="OnSelectedChanged"
    rowstyle-wrap="false" rowstyle-cssclass="container" 
    onrowdatabound="RadGrid1_RowDataBound" datakeynames="DocID,DocumentName">
      <headerstyle cssclass="container" backcolor="LightBlue" wrap="false"    
          horizontalalign="Center" verticalalign="Middle" />
      <selectedrowstyle backcolor="Red" wrap="false" />
      <columns>
         <asp:TemplateField>
            <HeaderTemplate>
               <input id="chkAll" onclick="javascript:SelectAllCheckboxes(this);"
                    runat="server" type="checkbox" />
            </HeaderTemplate>
            <ItemTemplate>
               <asp:CheckBox ID="chkSelect" runat="server" />
            </ItemTemplate>
         </asp:TemplateField>
         <asp:ButtonField ButtonType="Link" HeaderText="View" Text="View" CommandName="view" />
         <asp:ButtonField ButtonType="Link" HeaderText="Activity" Text="Activity" CommandName="activity" />
      </columns>
</asp:gridview>

解决方案

Article : Grid View with fixed header

For the gridview to freez the header

div#gridPanel 
{
   width:900px;
   overflow:scroll;
   position:relative;
}


div#gridPanel th
{  
   top: expression(document.getElementById("gridPanel").scrollTop-2);
left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
   position: relative;
   z-index: 20;
}


<asp:Panel ID="gridPanel" runat="server" Height="200px" Width="100px" ScrollBars="Auto">
   asp.net grid view

这篇关于冻结的GridView头在ASP.NET？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！