Javascript-implemented GridView means that the fixed table header has a scroll bar and can be rolled.
Implement the GridView, the header is fixed, the table body has a scroll bar and can be rolled, the following is a good example, I hope to help you
The Code is as follows:
<% @ 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">
// Calculate the data, which can be obtained from the data
ICollection CreateDataSource ()
{
System. Data. DataTable dt = new System. Data. DataTable ();
System. Data. DataRow dr;
Dt. Columns. Add (new System. Data. DataColumn ("Student Class", typeof (System. String )));
Dt. Columns. Add (new System. Data. DataColumn ("Student name", typeof (System. String )));
Dt. Columns. Add (new System. Data. DataColumn ("", typeof (System. Decimal )));
Dt. Columns. Add (new System. Data. DataColumn ("Mathematics", typeof (System. Decimal )));
Dt. Columns. Add (new System. Data. DataColumn ("English", typeof (System. Decimal )));
Dt. Columns. Add (new System. Data. DataColumn ("computer", typeof (System. Decimal )));
For (int I = 0; I <50; I ++)
{
System. Random rd = new System. Random (Environment. TickCount * I );;
Dr = dt. NewRow ();
Dr [0] = "class" + I. ToString ();
Dr [1] = "test" + 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> Create a GridView with a fixed header and a scrollable table body </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>