DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js實現的GridView即表頭固定表體有滾動條且可滾動
js實現的GridView即表頭固定表體有滾動條且可滾動
編輯:JavaScript綜合知識     

 實現GridView,表頭固定,表體有滾動條且可滾動,下面有個不錯的示例,希望對大家有所幫助

 代碼如下: <%@ Page Language="C#" AutoEventWireup="true" %>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <script runat="server">  // 計算數據,完全可以從數據看取得  ICollection CreateDataSource( )  {  System.Data.DataTable dt = new System.Data.DataTable();  System.Data.DataRow dr;  dt.Columns.Add(new System.Data.DataColumn("學生班級", typeof(System.String)));  dt.Columns.Add(new System.Data.DataColumn("學生姓名", typeof(System.String)));  dt.Columns.Add(new System.Data.DataColumn("語文", typeof(System.Decimal)));  dt.Columns.Add(new System.Data.DataColumn("數學", typeof(System.Decimal)));  dt.Columns.Add(new System.Data.DataColumn("英語", typeof(System.Decimal)));  dt.Columns.Add(new System.Data.DataColumn("計算機", typeof(System.Decimal)));    for (int i = 0; i < 50; i++)  {  System.Random rd = new System.Random(Environment.TickCount * i); ;  dr = dt.NewRow();  dr[0] = "班級" + i.ToString();  dr[1] = "測試" + i.ToString();  dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);  dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);  dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);  dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);  dt.Rows.Add(dr);  }  System.Data.DataView dv = new System.Data.DataView(dt);  return dv;  }    protected void Page_Load( object sender, EventArgs e )  {  if (!IsPostBack)  {  GridView1.Attributes.Add("style", "table-layout:fixed");  GridView1.DataSource = CreateDataSource();  GridView1.DataBind();  }  }    </script>    <script type="text/javascript">  function s() {  var t = document.getElementById("<%=GridView1.ClientID%>");  var t2 = t.cloneNode(true)  for (i = t2.rows.length - 1; i > 0; i--)  t2.deleteRow(i)  t.deleteRow(0)  a.appendChild(t2)  }  window.onload = s  </script>    <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <title>創建表頭固定,表體可滾動的GridView</title>  </head>  <body>  <form id="Form1" runat="server">  <table>  <tr>  <td>  <div id="a">  </div>  <div style="overflow-y: scroll; height: 200px">  <asp:GridView ID="GridView1" runat="server" Font-Size="12px" BackColor="#FFFFFF"  GridLines="Both" CellPadding="4" Width="560">  <HeaderStyle BackColor="#EDEDED" Height="26px" />  </asp:GridView>  </div>  </td>  </tr>  </table>  </form>  </body>  </html>   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved