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

转载 2007年09月19日 10:32:00

方法一:

在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  

ASP.NET学习笔记[10] - GridView点击行按钮的时候固定滚动条的实现方法

GridView显示的内容行数比较多需要
  • xiangcns
  • xiangcns
  • 2014年10月16日 22:58
  • 2224

Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换

在Android开发中,我们常常用到ListView和GridView,而有的时候系统的ListView,GridView并不能满足我们的需求,所以我们需要自己定义一个ListView或者GridVi...
  • xiaanming
  • xiaanming
  • 2014年01月06日 08:57
  • 87837

Js弹出DIV遮罩层并在页面滚动居中显示效果

Js居中弹出遮罩层效果 *{margin:0;padding:0;} #bt{border: 2px solid #000;background-color: #ccc;cursor: poi...
  • jj88888
  • jj88888
  • 2014年03月03日 11:35
  • 1925

如何实现thead固定不动,tbody出现垂直滚动条

多套一个div,用两个table控制,标题一个table,内容一个table。给内容多套一个div,设置高度后 overflow-y: auto;...
  • yjl3039
  • yjl3039
  • 2015年05月06日 16:09
  • 3017

html溢出部分加滚动条

style=" overflow:scroll; "
  • daijiguo
  • daijiguo
  • 2016年06月02日 09:47
  • 1750

让框架的整个页面有滚动条,也可以实现其中的任一框架滚动

 框架都是整屏显示,最近做一个网页,要用到它,一屏显示就把很多内容给截掉我,我想啊想,想啊想,就用下面的方法试了一下,结果出来了:  如果你想要它们其中的某个框架有滚动条的话,在框架里加上  scro...
  • buding500
  • buding500
  • 2009年10月30日 11:07
  • 705

UICollectionView-设置弹簧效果是否显示滚动条等向

  • baohanqing
  • baohanqing
  • 2016年04月08日 09:53
  • 2150

实现div跟着滚动条动的效果

            OnScroll Example                    window.onscroll = function () {                var o...
  • laolaowhn
  • laolaowhn
  • 2007年07月26日 16:15
  • 5053

table 表头固定,表体滚动的css方法

table tbody {       display:block;       height:500px;       overflow-y:scroll;   }         t...
  • Mr_rencp
  • Mr_rencp
  • 2017年09月08日 13:30
  • 211

用css实现如何使滚动条隐藏但是溢出时有滚动的效果

html> html> head lang="en"> meta charset="UTF-8"> title>title> style> .d1{ ...
  • hongbowenanna
  • hongbowenanna
  • 2016年01月19日 16:43
  • 4749
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Girdview实现滚动条效果,并且Head部分不滚动
举报原因:
原因补充:

(最多只允许输入30个字)