有滚动条、固定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 oclearcase/" target="_blank" >ccurence,

//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.");

}

}

}

}

原文转自：http://www.ltesting.net