创建表头固定，表体可滚动的GridView

编程思想：

1、定义两个div，一个放置表头，一个放置表体。

2、用GridView输出数据，并将其放置在表体Div里。

3、利用js分离出表头和表体，分别放置在表头Div和表体Div中。

Html代码：

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>表头固定，表体可滚动的GridView</title>
  <script type="text/javascript">
function init()
{
    var tbBody = document.getElementById("<%=GridView1.ClientID%>");
    var tbHead = tbBody.cloneNode(true)
    for(i = tbHead.rows.length -1;i > 0;i--)
        tbHead.deleteRow(i)
    tbBody.deleteRow(0)
    divContent.appendChild(tbHead)
}
window.onload = init
</script>
</head>
<body>
  <form id="Form1" runat="server">
    <table>
      <tr>
        <td>
          <div id="divContent">
          </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="#666666" ForeColor="#ffffff" Height="26px" />
            </asp:GridView>
          </div>
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

CS代码：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
   System.Collections.ICollection CreateDataSource( )
  {
    System.Data.DataTable dt = new System.Data.DataTable();
    System.Data.DataRow dr;
    dt.Columns.Add(new System.Data.DataColumn("列1", typeof(System.String)));
    dt.Columns.Add(new System.Data.DataColumn("列2", typeof(System.String)));
    dt.Columns.Add(new System.Data.DataColumn("列3", typeof(System.String)));
    dt.Columns.Add(new System.Data.DataColumn("列4", typeof(System.String)));
    dt.Columns.Add(new System.Data.DataColumn("列5", typeof(System.String)));

    for (int i = 0; i < 50; i++)
    {

      dr = dt.NewRow();
      dr[0] = "数据" + i.ToString();
      dr[1] = "数据" + i.ToString();
      dr[2] = "数据" + i.ToString();
      dr[3] = "数据" + i.ToString();
      dr[4] = "数据" + i.ToString();
      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();
    }
  }

}

或是以下一个例子：

代码：

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

相关阅读:
2018.08.02
加油。
2018.07.08
2018.06.22
LeetCode #169. Majority Element 数组摩尔投票法
LeetCode #119 Pascal's Triangle II 数组滚动数组
LeetCode #845 Longest Mountain in Array 数组线性DP
LeetCode #41 First Missing Positive 数组
LeetCode #384 Shuffle an Array 数组洗牌算法
LeetCode #189 Rotate Array 数组双变量双指针

原文地址：https://www.cnblogs.com/tiger8000/p/996098.html