Girdview实现滚动条效果，并且Head部分不滚动

方法一：

在aspx加入下列script，在Gridview1的上边加一个<div id="Head"></div>,原理就是克隆一份Gridview的Head部分，添加到Div中，然后将gridview自己的head删除。

 

< script type = " text/javascript " >

     function  SetHead()
     
     ... {
        if(document.getElementById("<%=GridView1.ClientID%>"))
        ...{
             var GridTable = document.getElementById("<%=GridView1.ClientID%>");
     
             
             var GridNodes = GridTable.cloneNode(true)
     
             for(i = GridNodes.rows.length -1;i > 0;i--)
     
             GridNodes.deleteRow(i)  
     
             GridTable.deleteRow(0)  
     
             Head.appendChild(GridNodes) 
        }
    }
     
    window.onload  =  SetHead

</ script >

 

方法二：

使用样式，在App_Themes 中建立一皮肤文件，在样式css文件中如下

 .FreezingRow
{...} { 
   position:relative ;
   top:expression(this.offsetParent.scrollTop); 
   z-index: 10; 
}  

 

 

< asp:Panel  ID ="ScrollTable"  runat ="server"  Width ="99%"  Style ="overflow-y: auto; height: 450px;
            position: relative; margin: 0 auto; word-break:break-all; word-wrap:break-word;"   
    <asp:GridView ID ="GridView2"  runat ="server"  AutoGenerateColumns ="False"  AllowPaging ="True"
                    PageSize ="100"  Width ="95%"   >
         < Columns >
             < asp:BoundField  HeaderText ="<%$ Resources:TempoMongon %>" >
                 < ItemStyle  Width ="10%"  HorizontalAlign ="Left"   />
                 < HeaderStyle  CssClass ="FreezingRow"   />
             </ asp:BoundField >
             < asp:BoundField  HeaderText ="<%$ Resources:NamaeMongon %>"  DataField ="KJ_SYAINMEI" >
                 < ItemStyle  Width ="10%"  HorizontalAlign ="Left"   />
                 < HeaderStyle  CssClass ="FreezingRow"   />
             </ asp:BoundField >
             < asp:BoundField  HeaderText ="<%$ Resources:KengenMongon %>" >
                 < ItemStyle  Width ="10%"  HorizontalAlign ="Left"   />
                 < HeaderStyle  CssClass ="FreezingRow"   />
             </ asp:BoundField >
          </ Columns >
               
     </ asp:GridView >
</ asp:Panel >

 

也就是用panel的滚动条，控制gridview的头使其不动。第二种方法有个缺点，就是gridview的模版列中如果存在dropdownlist，样式就变了，就只能用上一种方法实现了。有需要代码的可以联系我， chfzhb@163.com