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

比眉伴天荒 2021-12-20 22:15 198阅读 0赞

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

转载于:https://www.cnblogs.com/Spring/archive/2006/04/04/366608.html