GridView固定表头
原文地址：http://www.codeproject.com/KB/webforms/FrozenGridHeader.aspx
示例代码：
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.WrapperDiv
{
width:560px;height:290px;border: 1px solid black;
}
.WrapperDiv TH
{
/* Needed for IE */
position: relative;
}
.WrapperDiv TR
{
/* Needed for IE */
height:0px;
}
.ScrollContent
{
/* Needed for Opera */
display: block;
overflow: auto;
width: 100%;
height: 250px;
}
.FixedHeader
{
/* Needed for opera */
display: block;
}
</style>
<script runat="server">
ICollection CreateDataSource( )
{
System.Data.DataTable dt = new System.Data.DataTable();
System.Data.DataRow dr;
dt.Columns.Add(new System.Data.DataColumn("Product Id", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("Product Name", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("Product Price", typeof(System.Decimal)));
dt.Columns.Add(new System.Data.DataColumn("Manufacture Time", typeof(System.String)));
dt.Columns.Add(new System.Data.DataColumn("Expired Time", typeof(System.String)));
for (int i = 1; i <= 50; i++)
{
System.Random rd = new System.Random(Environment.TickCount * i); ;
dr = dt.NewRow();
dr[0] = i.ToString();
dr[1] = "Sample Product" + i.ToString();
dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);
dr[3] = "September/2008";
dr[4] = "September/2012";
dt.Rows.Add(dr);
}
System.Data.DataView dv = new System.Data.DataView(dt);
return dv;
}
protected void Page_Load( object sender, EventArgs e )
{
if (!IsPostBack)
{
GridView1.DataSource = CreateDataSource();
GridView1.DataBind();
}
}
</script>
<script type="text/ecmascript">
var headerHeight = 8;
/// <summary>
/// Responsible for call appropriate function according to browser
/// for Browser Compatibility
/// </summary>
function onLoad()
{
if(navigator.appName == "Opera")
{
freezeGridViewHeaderForOpera('GridView1');
}
else
{
freezeGridViewHeaderForIEAndFF('GridView1','WrapperDiv');
}
}
/// <summary>
/// Used to create a fixed GridView header and allow scrolling
/// for IE and FF (Tested in IE-7 and FF-3.0.3)
/// </summary>
/// <param name="gridViewId" type="String">
/// Client-side ID of the GridView control
/// </param>
/// <param name="wrapperDivCssClass" type="String">
/// CSS class to be applied to the GridView's wrapper div element.
/// </param>
function freezeGridViewHeaderForIEAndFF(gridViewId,wrapperDivCssClass)
{
var grid = document.getElementById(gridViewId);
if (grid != 'undefined')
{
grid.style.visibility = 'hidden';
var div = null;
if (grid.parentNode != 'undefined')
{
//Find wrapper div output by GridView
div = grid.parentNode;
if (div.tagName == "DIV")
{
div.className = wrapperDivCssClass;
div.style.overflow = "auto";
}
}
var grid = prepareFixedHeader(grid);
var tbody = grid.getElementsByTagName('TBODY')[0];
//Needed for Firefox
tbody.style.height = (div.offsetHeight - headerHeight) + 'px';
tbody.style.overflowX = "hidden";
tbody.overflow = 'auto';
tbody.overflowX = 'hidden';
grid.style.visibility = 'visible';
}
}
/// <summary>
/// Used to create a fixed GridView header and allow scrolling
/// for Opera (Tested in Opera-9.2)
/// </summary>
/// <param name="gridViewId" type="String">
/// Client-side ID of the GridView control
/// </param>
function freezeGridViewHeaderForOpera(gridViewId)
{
var grid = document.getElementById(gridViewId);
if (grid != 'undefined')
{
grid = prepareFixedHeader(grid);
var headers = grid.getElementsByTagName('THEAD')[0];
headers.className = "FixedHeader";
var tbody = grid.getElementsByTagName('TBODY')[0];
tbody.className = "ScrollContent";
var cells = tbody.childNodes[0];
for(var i = 0; i < cells.childNodes.length;i++)
{
var tableCell = cells.childNodes[i];
var tableCellWidth = getStyle(tableCell,'width')
var headerCell = headers.childNodes[0].childNodes[i];
var headerCellWidth = getStyle(headerCell,'width');
if(widthPxToInt(tableCellWidth) > widthPxToInt(headerCellWidth))
{
headerCell.style.width=(widthPxToInt(tableCellWidth) - 10) + "px";
}
else
{
tableCell.style.width=(widthPxToInt(headerCellWidth) - 10) + "px";
}
}
}
}
/// <summary>
/// Used to prepare a fixed GridView header
/// </summary>
/// <param name="grid" type="GridView">
/// The Reference Of GridView control
/// </param>
function prepareFixedHeader(grid)
{
//Find DOM TBODY element and and
var tags = grid.getElementsByTagName('TBODY');
if (tags != 'undefined')
{
var tbody = tags[0];
var trs = tbody.getElementsByTagName('TR');
if (trs != 'undefined')
{
headerHeight += trs[0].offsetHeight;
//Remove first TR tag from it
var headTR = tbody.removeChild(trs[0]);
//create a new element called THEAD
var head = document.createElement('THEAD');
head.appendChild(headTR);
//add to a THEAD element instead of TR so CSS styles
//can be applied properly in both IE and FireFox
grid.insertBefore(head, grid.firstChild);
}
}
return grid;
}
function getStyle(oElm, strCssRule)
{
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
/// <summary>
/// Used to convert from Pxel to Integer
/// </summary>
/// <param name="width" type="String">
/// Width of any thing like GridHeader,GridCell
/// </param>
function widthPxToInt(width)
{
width = width.substr(0,width.length-2);
return new Number(width);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" Font-Size="12px" BackColor="#FFFFFF"
GridLines="Both" CellPadding="4" Width="560px">
<HeaderStyle BackColor="#EDEDED" Height="26px" />
</asp:GridView>
</div>
</form>
</body>
</html>
<script type="text/ecmascript">
window.onload = onLoad();
</script>
浙公网安备 33010602011771号