固定表头方法:
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 ="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:
{
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":
上述这种方法是以页面的滚动条为基准,因此是“this.offsetParent.scrollTop”,实际使用时可以根据需要尝试其他调整方法
至于固定左边列的方法与此类似
{
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