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  

纯CSS实现的表格滚动条效果

  • 2014年02月16日 15:48
  • 3KB
  • 下载

Android中自定义ProgressDialog实现加载滚动条(加载中…)效果

本文所述是通过自定义ProgressDialog实现弹出“加载中……”效果。

JQuery页面随滚动条动态加载效果实现

Google阅读器上 有一个AJAX scollLoad效果很 不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止。要知道,数据量增加很频...

jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果

看到Louis Han的博客有个图片随滚动条渐显的效果,感觉既华丽又能节省资源,一举两得,于是就开始研究。通过查看其源代码以及google搜索知识,初步搞明白了,它是通过一个js来实现的,下面就来介绍...
  • lyd518
  • lyd518
  • 2011年07月07日 22:53
  • 881

jquery使用div实现滚动条效果

查了些div实现滚动条的效果,看了很多,大多都不符合要求。 要求如下: 1.div大小固定,div中内容大小不固定 2.鼠标移动到内容上时,如果内容太大,则出现滚动条,并可以拖动查看,而内容宽度...
  • comeonJ
  • comeonJ
  • 2011年10月17日 17:01
  • 787

关于用jquery.masonry.js实现动态加载效果(当页面滚动条拉到底部时时重新加载图片)

动画效果 #Books{ width: 1000px; height: auto; margin: ...

JQuery页面随滚动条动态加载效果实现

Google阅读器上 有一个AJAX scollLoad效果很 不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止。要知道,数据量增加很频...

Jquery实现自定义滚动条,DIV滑动效果

浏览器自带的滚动条一般都不符合我们的需求(因为不好看,太丑,还不能改!),网上搜了一下,发现有很多用js或者jquery实现的自定义的滚动条,而且样式都很漂亮。比如说这个: http://manos....
  • csmzl
  • csmzl
  • 2016年10月21日 09:40
  • 1457

js 实现层随滚动条移动效果

随滚动条移动的层 - 51windows.Net .div{  position: absolute;  border: 2px solid red;  backgro...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Girdview实现滚动条效果,并且Head部分不滚动
举报原因:
原因补充:

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