技术总奸

通过客户端扩展实现固定GridView表头功能

当GridView单页数据较多,需要纵向滚动数据时,我们通常将gridview包裹在一个div里面,然后设置div的样式。这种方式的缺点就是滚动时GridView的表头不能固定,会被滚动出视野。网上关于固定GridView表头的实现方式有很多,但大多比较繁琐,往往需要客户端或服务器端的很多附加代码。本例的作者只通过一段客户端脚本即实现了该功能。

<style type="text/css">
    .__GridViewClass th {
        position:relative;
    }
    .__GridViewClass tr 
    {
        
        height:0px;
    }  

</style>
<script>
    function onLoad()
    {
        //Called when page first loads
        FreezeGridViewHeader("GridView1",'400px','800px',"1px solid black",null);
    }    
    
    
    function FreezeGridViewHeader(gridID,h,w,wrapperDivBorderStyle,
      wrapperDivCssClass) 
    {
        /// <summary>Used to create a fixed GridView header and allow 
        /// scrolling</summary>
        /// <param name="gridID" type="String">Client-side ID of the 
        ///  GridView control</param>
        /// <param name="h" type="Number">Height of the scrollable grid</param>
        /// <param name="w" type="Number">Width of the scrollable grid</param>
        /// <param name="wrapperDivBorderStyle" type="String">CSS style to be 
        ///  applied to the GridView's wrapper div element</param>
        /// <param name="wrapperDivCssClass" type="String">CSS class to be 
        /// applied to the GridView's wrapper div element</param>
        var grid = document.getElementById(gridID);
        if (grid != 'undefined')
        {
            grid.style.visibility = 'hidden';
            grid.className = (grid.className == null || 
              grid.className == 'undefined' ||
              grid.className == '')?'__GridViewClass':grid.className + 
              ' __GridViewClass';
            if (grid.parentNode != 'undefined') 
            {
                //Find wrapper div output by GridView
                var div = grid.parentNode;
                if (div.tagName == "DIV")
                {
                    if (this._WrapperDivCssClass != null) 
                      div.className = wrapperDivCssClass;
                    div.style.height = ((h==null)?'400px':h);
                    div.style.width = ((w==null)?'800px':w);
                    if (wrapperDivBorderStyle != null) 
                      div.style.border = wrapperDivBorderStyle; 
                    div.style.overflow = "auto";
                }
            }                
            //Find DOM TBODY element and remove first TR tag from 
            //it and add to a THEAD element instead so CSS styles
            //can be applied properly in both IE and FireFox
            var tags = grid.getElementsByTagName_r('TBODY');
            if (tags != 'undefined')
            {
                var tbody = tags[0];
                var trs = tbody.getElementsByTagName_r('TR');
                if (trs != 'undefined') 
                {
                    var headTR = tbody.removeChild(trs[0]);
                    var head = document.createElement('THEAD');
                    head.appendChild(headTR);
                    grid.insertBefore(head, grid.firstChild);
                }
                tbody.style.height = (parseInt(h) * .92) + 'px';
                tbody.style.overflowX = "hidden";
            }
            grid.style.visibility = 'visible';
        }
    }
</script>   

原文地址http://weblogs.asp.net/dwahlin/archive/2007/07/31/freeze-asp-net-gridview-headers-by-creating-client-side-extenders.aspx

 

补记:作者将该功能包装为一个 ajax tookit extender,可以更加方便的使用,下载。作者也介绍了该extender的具体实现步骤,可以读读,作为学习asp.net ajax toolkit extender实现的好资料,原文地址 http://weblogs.asp.net/dwahlin/archive/2007/08/08/creating-an-asp-net-ajax-toolkit-extender-control.aspx

ajax toolkit extender for freezing gridview headers

posted on 2010-01-01 00:00  阿福  阅读(185)  评论(0编辑  收藏  举报