(转)GridView固定表头

 

固定表头方法：

1，样式固定。

这个方法是从网上参考的，但是忘记了来源，使用之后发现效果不是很好，有闪动。以下是源码（来源于网络）：

<style type="text/css"> 
    .Freezing 
    { 
        position:relative; 
        table-layout:fixed;
        top:expression(this.offsetParent.scrollTop);   
        z-index: 10;
    } 
    .Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}   
</style>

 

 

2，Javascript方法。

也是网上参考，搜索应该比较多，据网友回帖说是效果很好，自己使用效果不好。以下是源码分析：

// 创建表头
     if (document.getElementById( " gvTitle " )  ==  null )
    {
         var  gdvList  =  document.getElementById( " gvCommon " );
         var  gdvHeader  =  gdvList.cloneNode( true );
         for (i  =  gdvHeader.rows.length  -  1 ; i  >  0 ;i -- )
        {
            gdvHeader.deleteRow(i);
        }
        document.getElementById( " divTitle " ).appendChild(gdvHeader);

        gdvList.deleteRow( 0 );

         // gdvList.rows[0].style.display = 'none';
    }

 

使用这个JS方法后，我要继续在JS中访问这个GridView，但是发现GridView的只剩表头行了，数据行都访问不到，原因就是那个

for循环已经删除掉了。

还有其他问题，gdvList.deleteRow(0)这一句代码把第一行表头删除了，如果我用JS方法要在GridView里面添加一行，而正好是在第一行添加的话，那个新添加行的列宽会失去约束，变的错乱。

而如果使用gdvList.rows[0].style.display = 'none'这一行代码，列宽是不会错乱，但奇怪的问题出现了，就是表头跟下面的数据行的列宽对不齐，很是纳闷？？？

 

3，还是Javascript方法。也是项目中最后使用的方法。

// 创建表头
     if (document.getElementById( " gvTitle " )  ==  null )
    {
         var  gdvList  =  document.getElementById( " gvCommon " );
         var  gdvHeader  =  gdvList.cloneNode( true );
        gdvHeader.id  =  " gvTitle " ;
         for (i  =  gdvHeader.rows.length  -  1 ; i  >  0 ;i -- )
        {
            gdvHeader.deleteRow(i);
        }
        document.getElementById( " divTitle " ).appendChild(gdvHeader);
         var  div  =  document.getElementById( " divGvData " );
         var  tbl  =  document.getElementById( " divTitle " );
        tbl.style.position  =  " absolute " ;
        tbl.style.zIndex  =  100 ;
        tbl.style.top  =  div.offsetTop;
        tbl.style.left  =  div.offsetLeft;
    }

 

大致做法是利用JS方法Copy出一个表头 gdvHeader 放在一个“divTitle”的DIV中。

GridView是包含在“divGvData”DIV中的，然后设置divTitle的页面位置和divGvData的一致，也就是覆盖在上面。 目前发现效果还行。有一点要注意，gdvHeader.id = "gvTitle";要重新设置一个ID，不然删除的还是GridView的数据行。

HTML中的部分代码：

< div  id ="divTitle"  style ="position:relative; top:0; left:0; overflow:hidden; width:978px; border:0px solid red;" ></ div >
< div  id ="divGvData"  runat ="server"  style ="position:relative; top:0px; left:0px; overflow:scroll; width:994px;height:450px;"  onscroll ="funGrilViewScroll(); return false;" >
             < asp:GridView  ID ="gvCommon"  style ="position:relative; top:0px; left:0px;"  runat ="server"  CssClass ="gvFixd"  BackColor ="White"  BorderColor ="#999999"  BorderStyle ="None"  BorderWidth ="1px"  CellPadding ="3"  AutoGenerateColumns ="False"  GridLines ="Vertical"  PageSize ="5"  AllowSorting ="True"  OnSorting ="gvCommon_Sorting"    >
                 < FooterStyle  BackColor ="#CCCCCC"  ForeColor ="Black"  />
                 < RowStyle  BackColor ="#E7E7FF"  ForeColor ="Black"  Font-Size ="Small"  />
                 < HeaderStyle  HorizontalAlign ="Center"  BackColor ="#000084"  BorderColor ="White"  BorderWidth ="1px"  BorderStyle ="Solid"  Font-Bold ="True"  ForeColor ="White" />
                 </ asp:GridView >
</ div >

 

4, 还有一种asp.net方法，我没有测试过

protected void InitGridviewHeader(GridView _gv1, Table _tb1, Panel _pc1)
        {
            //Page.EnableViewState = false;

            //[Espa駉l]Copiando las propiedades del renglon de encabezado
            //[English]Coping a header row data and properties    
            _tb1.Rows.Add(_gv1.HeaderRow);
            _tb1.Rows[0].ControlStyle.CopyFrom(_gv1.HeaderStyle);
            _tb1.CellPadding = _gv1.CellPadding;
            _tb1.CellSpacing = _gv1.CellSpacing;
            _tb1.BorderWidth = _gv1.BorderWidth;

            //if (!_gv1.Width.IsEmpty)
            //_gv1.Width = Unit.Pixel(Convert.ToInt32(_gv1.Width.Value) + Convert.ToInt32(_tb1.Width.Value) + 13);

            //[Espa駉l]Copiando las propiedades de cada celda del nuevo encabezado.
            //[English]Coping  each cells properties to the new header cells properties
            int Count = 0;
            _pc1.Width = Unit.Pixel(100);
            for (Count = 0; Count < _gv1.HeaderRow.Cells.Count - 1; Count++)
            {
                _tb1.Rows[0].Cells[Count].Width = _gv1.Columns[Count].ItemStyle.Width;
                _tb1.Rows[0].Cells[Count].BorderWidth = _gv1.Columns[Count].HeaderStyle.BorderWidth;
                _tb1.Rows[0].Cells[Count].BorderStyle = _gv1.Columns[Count].HeaderStyle.BorderStyle;
                _pc1.Width = Unit.Pixel(Convert.ToInt32(_tb1.Rows[0].Cells[Count].Width.Value) + Convert.ToInt32(_pc1.Width.Value) + 14);
            }
            //Panel1.Width = Unit.Pixel(Convert.ToInt32(_tb1.Rows[0].Cells[Count-1].Width.Value) + 12);
        }

 

From： http://www.cnblogs.com/bluewind2879/archive/2008/09/25/1298707.html

 

---

http://blog.csdn.net/Samanthaqu/archive/2007/12/04/1915667.aspx

 

  GridView固定表头和首列

 

 

 

当GridVIew中要显示的数据非常多的时候，用户常需要开发人员固定表头或是首列，以保证在拖动滚动条的时候，可以清楚得了解到每一列或行的内容。 借助于CSS的功能，可以将GridView打造成这样的表格：

    首先，要把GridView放在一个<asp:Panel runat=server ID="panel">容器中，然后在页面中添加如下CSS：

.fixedheader 
{      
    position : relative  ;  
    table-layout : fixed ;
    top : expression(this.offsetParent.scrollTop -1) ;    
    z-index :  10 ;
}  

.fixedheader th { text-overflow : ellipsis ; overflow : hidden ; white-space :  nowrap ; }

最后将GridView的HeaderStyle属性集中的CssClass属性设为"fixedheader"：

< HeaderStyle Wrap = " False "  CssClass = " fixedheader "  />

上述这种方法是以页面的滚动条为基准，因此是“this.offsetParent.scrollTop”，实际使用时可以根据需要尝试其他调整方法

    至于固定左边列的方法与此类似

.fixedLeft
{      
    position :  relative ;  
     left : expression (this.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.scrollLeft-4) ;     
     z-index : 10 ;
}  

     其中 expression后的parentElement到底要多少个，需要设置Debugger自己去跟踪。同时，还要记住设置GridView的背景色， 即便是白色也要设：#FFFFFF，不能为透明。最后，将GridView的ItemStyle中的CssClass设为"fixedLeft" ，便可得到效果了。

 

 

 

---

 

固定GridView的表头和某几列

 

 

从一个老外的blog上看到了这个例子，自己修改一下，做个GridView的Demo. 共享给大家。
FixedHeader_Demo.rar

 

http://www.cnblogs.com/PLAYBOY840616/archive/2008/07/24/1249328.html 

http://www.cnblogs.com/jaic-xiao/archive/2008/07/22/jin_tian_kan_dao_hao_wen.html ==========>HTML表格具有固定的页眉。 

 

 

 

 

转载于:https://www.cnblogs.com/neru/archive/2010/09/10/1822995.html