Dotjum@點部落

筆記自己的想法與記錄

2008-04-19

[ASP.NET]GridView DataGrid 固定表頭 像 Excel 凍結 表頭 freeze Head

摘要:[ASP.NET]GridView DataGrid 固定表頭 像 Excel 凍結 表頭 freeze Head

這個 GridView 固定表頭，以經是非常經點的老問題了，
這邊 Dotjum 也是參考當初在網路上找到的Code ，至於是那邊參考來的，
Dotjum 已經忘記了，先跟原作說聲抱歉，
比較早之前還不知道CSS可以控制，Dotjum 還曾經用兩個 DataGird 一個跑表頭 一個跑資料這樣，
後來發現CSS可以控制以後，就都使用CSS的方式，
話不多說，請看說明

Step 1. 先加入 CSS 於 ASPX Head (重點是那CSS）

<head runat="server">
    <title>固定表頭</title>
      <style type="text/css">
<!--
.DataGridFixedHeader {background-color: white; position:relative; top:expression(this.offsetParent.scrollTop);}
-->
</style></head>

 

Step 2.  用 DIV 加上 CSS 把 GridView 包起來

  <DIV style="OVERFLOW: auto; HEIGHT: 500px">

        <asp:GridView ID="GridView1" runat="server"
 AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="SchoolID"></asp:GridView></DIV>

 

Step 3. 就能看到固定表頭的GridView畫面
image
簡單三步驟就能固定GirdView 表頭， 有趣嗎？下次在介紹有趣的給你知道。
MSDN FORUM 上目前有的討論：  請問如果要把GridView的表頭資料像EXCEL一樣固定住要怎麼做

系列文章