Javascript实现GridView,表头固定,表体有滚动条可滚动

[csharp]  view plain copy print ?
  1. <%@ Page Language="C#" AutoEventWireup="true" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <script runat="server">  
  6.   // 计算数据,完全可以从数据看取得  
  7.   ICollection CreateDataSource( )  
  8.   {  
  9.     System.Data.DataTable dt = new System.Data.DataTable();  
  10.     System.Data.DataRow dr;  
  11.     dt.Columns.Add(new System.Data.DataColumn("学生班级"typeof(System.String)));  
  12.     dt.Columns.Add(new System.Data.DataColumn("学生姓名"typeof(System.String)));  
  13.     dt.Columns.Add(new System.Data.DataColumn("语文"typeof(System.Decimal)));  
  14.     dt.Columns.Add(new System.Data.DataColumn("数学"typeof(System.Decimal)));  
  15.     dt.Columns.Add(new System.Data.DataColumn("英语"typeof(System.Decimal)));  
  16.     dt.Columns.Add(new System.Data.DataColumn("计算机"typeof(System.Decimal)));  
  17.   
  18.     for (int i = 0; i < 50; i++)  
  19.     {  
  20.       System.Random rd = new System.Random(Environment.TickCount * i); ;  
  21.       dr = dt.NewRow();  
  22.       dr[0] = "班级" + i.ToString();  
  23.       dr[1] = "测试" + i.ToString();  
  24.       dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);  
  25.       dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);  
  26.       dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);  
  27.       dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);  
  28.       dt.Rows.Add(dr);  
  29.     }  
  30.     System.Data.DataView dv = new System.Data.DataView(dt);  
  31.     return dv;  
  32.   }  
  33.   
  34.   protected void Page_Load( object sender, EventArgs e )  
  35.   {  
  36.     if (!IsPostBack)  
  37.     {  
  38.       GridView1.Attributes.Add("style""table-layout:fixed");  
  39.       GridView1.DataSource = CreateDataSource();  
  40.       GridView1.DataBind();  
  41.     }  
  42.   }  
  43.     
  44. </script>  
  45.   
  46. <script type="text/javascript">  
  47.     function s() {  
  48.         var t = document.getElementById("<%=GridView1.ClientID%>");  
  49.         var t2 = t.cloneNode(true)  
  50.         for (i = t2.rows.length - 1; i > 0; i--)  
  51.             t2.deleteRow(i)  
  52.         t.deleteRow(0)  
  53.         a.appendChild(t2)  
  54.     }  
  55.     window.onload = s  
  56. </script>  
  57.   
  58. <html xmlns="http://www.w3.org/1999/xhtml">  
  59. <head>  
  60.   <title>创建表头固定,表体可滚动的GridView</title>  
  61. </head>  
  62. <body>  
  63.   <form id="Form1" runat="server">  
  64.     <table>  
  65.       <tr>  
  66.         <td>  
  67.           <div id="a">  
  68.           </div>  
  69.           <div style="overflow-y: scroll; height: 200px">  
  70.             <asp:GridView ID="GridView1" runat="server" Font-Size="12px" BackColor="#FFFFFF"  
  71.               GridLines="Both" CellPadding="4" Width="560">  
  72.               <HeaderStyle BackColor="#EDEDED" Height="26px" />  
  73.             </asp:GridView>  
  74.           </div>  
  75.         </td>  
  76.       </tr>  
  77.     </table>  
  78.   </form>  
  79. </body>  
  80. </html>  
转自: http://blog.csdn.net/smartsmile2012/article/details/8187444

你可能感兴趣的:(JavaScript,GridView,asp.net)