通过客户端扩展实现固定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>
补记:作者将该功能包装为一个 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