客户要一个有滚动条的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. " ); } } }}