有滚动条、固定Header的ASP.Net DataGrid实现

客户要一个有滚动条的ASP.Net DataGrid控件，只好写了：
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Diagnostics;
using System.IO;
using System.Web.UI.Design.WebControls;
using System.Text;
using System.Drawing;

[assembly:TagPrefix("Microsoft.Gtec.Dsv", "gtecdsv")]
namespace Microsoft.Gtec.Dsv
{
/// <summary>
/// Summary description for WebCustomControl1.
/// </summary>
[ToolboxData("<{0}:ScrollableFixedHeaderDataGrid runat=server></{0}:ScrollableFixedHeaderDataGrid>")]
public class ScrollableFixedHeaderDataGrid: System.Web.UI.WebControls.DataGrid
{
protected override void Render(HtmlTextWriter output)
{
//Use this flag to determine whether the component is in design-time or runtime.
//The control will be rendered differently in IDE.
//Don't bother to use DataGridDesigner.GetDesignTimeHtml
bool designMode = ((Site != null) && (Site.DesignMode));
//Backing up the properties need to change during the render process
string tempLeft = Style["LEFT"];
string tempTop = Style["TOP"];
Unit tempHeight = Height;
string tempTableStyle = Style["TABLE-LAYOUT"];

//Render a "<div>" container with scrollbars.
output.WriteBeginTag("div");
output.WriteAttribute("id",ID + "_div");
output.WriteAttribute("style",
"HEIGHT: " + Height + ";" +
//Leave 20px for the vertical scroll bar,
//assuming the end-user will not set his scroll bar to more than 20px.
"WIDTH: " + (Width.Value + 20) + "px;" +
"TOP: " + Style["TOP"] + ";" +
"LEFT: " + Style["LEFT"] + ";" +
"POSITION: " + Style["POSITION"] + ";" +
"OVERFLOW-X: auto;" +
"Z-INDEX: " + Style["Z-INDEX"] + ";" +
//Render the scrollbar differently for design-time and runtime.
"OVERFLOW-Y: " + (designMode?"scroll":"auto")
);
output.Write(HtmlTextWriter.TagRightChar);

//The DataGrid is inside the "<div>" element, so place it at (0,0).
Style["LEFT"] = "0px";
Style["TOP"] = "0px";
//Render the DataGrid.
base.Render(output);
output.WriteEndTag("div");
//Restore the values
Style["LEFT"] = tempLeft;
Style["TOP"] = tempTop;

//The following rendering is only necessary under runtime. It has negative impact during design time.
if (!designMode)
{
//Render another copy of the DataGrid with only headers.
//Render it after the DataGrid with contents,
//so that it is on the top. Z-INDEX is more complex here.
//Set Height to 0, so that it will adjust on its own.
Height = new Unit("0px");
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
//This style is important for matching column widths later.
Style["TABLE-LAYOUT"] = "fixed";
base.Render(htw);
StringBuilder sbRenderedTable = sw.GetStringBuilder();
htw.Close();
sw.Close();
Debug.Assert((sbRenderedTable.Length > 0),
"Rendered HTML string is empty. Check viewstate usage and databinding.");
string temp = sbRenderedTable.ToString();
if (sbRenderedTable.Length > 0)
{
//AllowPaging at the top?
if ((AllowPaging) && ((PagerPosition.Top == PagerStyle.Position || (PagerPosition.TopAndBottom == PagerStyle.Position))))
{
Trace.WriteLine(temp);
sbRenderedTable.Replace(ID,ID + "_Pager", 0, (temp.IndexOf(ID) + ID.Length));
temp = sbRenderedTable.ToString();
string pager = temp.Substring(0, temp.ToLower().IndexOf(@"</tr>") + 5);
Trace.WriteLine(pager);
output.Write(pager);
output.WriteEndTag("table");
//Start of pager's <tr>
int start = temp.ToLower().IndexOf(@"<tr");
//End of pager's </tr>
int end = temp.ToLower().IndexOf(@"</tr>") + 5;
//Remove the <tr> for pager from the string. Prepare to render the headers.
sbRenderedTable.Remove(start,end-start);
Trace.WriteLine(sbRenderedTable.ToString());
sbRenderedTable.Replace(ID + "_Pager",ID + "_Headers", 0, (temp.IndexOf(ID+"_Pager") + (ID+"_Pager").Length));
temp = sbRenderedTable.ToString();
string tableHeaders = temp.Substring(0, (temp.ToLower()).IndexOf(@"</tr>") + 5);
Trace.WriteLine(tableHeaders);
output.Write(tableHeaders);
output.WriteEndTag("table");
string headerID = ID + "_Headers";
string pagerID = ID + "_Pager";
string divID = ID + "_div";
string adjustWidthScript = @"
<script language=javascript>
//debugger;
var headerTableRow = " + headerID + @".rows[0];
var originalTableRow = " + ID + @".rows[1];"
//Adjust header row's height.
+ @"
headerTableRow.height = originalTableRow.offsetHeight;
" +
//Adjust pager row's height, width.
pagerID + @".rows[0].height = " + ID + @".rows[0].offsetHeight;
" +
pagerID + @".style.width = " + ID + @".offsetWidth;
for (var i = 0; i < headerTableRow.cells.length; i++) {
headerTableRow.cells[i].width = originalTableRow.cells[i].offsetWidth;
}
" +
//Also needs to adjust the width of the "<div>" at client side in addition to servier side,
//since the Table's actual width can go beyond the width specified at server side under Edit mode.
//The server side width manipulation is mainly for design-time appearance.
divID + @".style.width = " + ID + @".offsetWidth + 20 + 'px';
" +
//The following script is for flow-layout. We cannot get the position of the control
//on server side if the the page is with flow-layout.
headerID + @".style.left = " + divID + @".offsetLeft;
" +
headerID + @".style.top = " + divID + @".offsetTop + " + pagerID + @".offsetHeight;
" +
headerID + @".style.position = 'absolute';
" +
pagerID + @".style.left = " + divID + @".offsetLeft;
" +
pagerID + @".style.top = " + divID + @".offsetTop;
" +
pagerID + @".style.position = 'absolute';
</script>";
Page.RegisterStartupScript("dummyKey" + this.ID, adjustWidthScript);
//output.Write(adjustWidthScript);
}
else
{
//Replace the table's ID with a new ID.
//It is tricky that we must only replace the 1st occurence,
//since the rest occurences can be used for postback scripts for sorting.
sbRenderedTable.Replace(ID,ID + "_Headers", 0, (temp.IndexOf(ID) + ID.Length));
Trace.WriteLine(sbRenderedTable.ToString());
//We only need the headers, stripping the rest contents.
temp = sbRenderedTable.ToString();
string tableHeaders = temp.Substring(0, (temp.ToLower()).IndexOf(@"</tr>") + 5);
Trace.WriteLine(tableHeaders);
output.Write(tableHeaders);
output.WriteEndTag("table");
//Client side script for matching column widths.
//Can't find a way to do this on the server side, since the browser can change widths on the client side.
string adjustWidthScript = @"
<script language=javascript>
//debugger;
var headerTableRow = " + this.ID + @"_Headers.rows[0];
var originalTableRow = " + this.ID + @".rows[0];
headerTableRow.height = originalTableRow.offsetHeight;
for (var i = 0; i < headerTableRow.cells.length; i++) {
headerTableRow.cells[i].width = originalTableRow.cells[i].offsetWidth;
}
" +
//Also needs to adjust the width of the "<div>" at client side in addition to servier side,
//since the Table's actual width can go beyond the width specified at server side under Edit mode.
//The server side width manipulation is mainly for design-time appearance.
this.ID + "_div" + @".style.width = " + this.ID + @".offsetWidth + 20 + 'px';
" +
//The following script is for flow-layout. We cannot get the position of the control
//on server side if the the page is with flow-layout.
this.ID + "_Headers" + @".style.left = " + this.ID + @"_div.offsetLeft;
" +
this.ID + "_Headers" + @".style.top = " + this.ID + @"_div.offsetTop;
" +
this.ID + "_Headers" + @".style.position = 'absolute';
</script>";
Page.RegisterStartupScript("dummyKey" + this.ID, adjustWidthScript);
//output.Write(adjustWidthScript);
}
Height = tempHeight;
Style["TABLE-LAYOUT"] = tempTableStyle;
}
}
}

protected override void OnInit(EventArgs e)
{
if (0 == Width.Value) Width = new Unit("400px");
if (0 == Height.Value) Height = new Unit("200px");
//Transparent header is not allowed.
if (HeaderStyle.BackColor.IsEmpty)
{
HeaderStyle.BackColor = Color.White;
}
//Transparent pager is not allowed.
if (PagerStyle.BackColor.IsEmpty)
{
PagerStyle.BackColor = Color.White;
}

base.OnInit (e);
}

[Browsable(false)]
public override bool ShowHeader
{
get
{
return true;
}
set
{
if (false == value)
throw new InvalidOperationException("Use the original DataGrid to set ShowHeaders to false.");
}
}
}
}