程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> 關於ASP.NET >> 創建表頭固定,表體可滾動的GridView

創建表頭固定,表體可滾動的GridView

編輯:關於ASP.NET

本方法只需要設置一個GridView的寬度,其它寬度不需要設置。測試環境:IE6,Firefox通過。

C#

<%@ Page Language="<a class="channel_keylink" href="http://dotnet.chinaitlab.com/List_233.html" target="_blank">C#</a>" 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] = "【孟子E章】" + 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>

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved