首先我們先建立一個GridView控制元件並且給他們巢狀一個div，和建立一個存放頭部的div

html程式碼：

 <div class="DataShowBox">
        //用來存放要凍結頭部的容器
        <div class="fixedHead">
        </div>
        <asp:GridView ID="grdview_BakingRecord" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="ID" ItemStyle-CssClass="txtCenter" HeaderText="編號" ItemStyle-Width="80px" >
                </asp:BoundField>
                <asp:BoundField DataField="Name" ItemStyle-CssClass="txtCenter" HeaderText="姓名" ItemStyle-Width="105px"  >
                </asp:BoundField>
                <asp:BoundField DataField="Age" ItemStyle-CssClass="txtCenter" HeaderText="年齡" ItemStyle-Width="70px" >
                </asp:BoundField>
                <asp:BoundField DataField="Class" ItemStyle-CssClass="txtCenter" HeaderText="班級" ItemStyle-Width="50px" >
                </asp:BoundField>
            </Columns>
            <HeaderStyle Height="30px" />
            <RowStyle Height="30px" />
            <PagerStyle CssClass="PagerStyle" />
            <AlternatingRowStyle BackColor="PeachPuff" />
        </asp:GridView>
 

建立完成之後我們再寫css，用來美化以及定位用來存放要凍結頭部的容器

*{
    margin:0;
    padding:0;
    font-family:"微軟雅黑";
}
.DataShowBox{
    height:70%;
    width:100%;
    overflow:auto;
    position:relative;
}
.DataShowBox table{
    width:1500px;
    margin-bottom:10px;
}
.fixedHead{
    width:1500px;
    position:absolute;
}
.DataShowBox{
            width:100%;
            height:400px;
            padding-left:10px;
            border:1px solid black;
}
 

之後我們在後臺進行模擬資料的操作

我們可以先建立一個實體類

public class Students
{
    public int ID { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
    public string Class { get; set; }
}

然後在載入事件中進行繫結資料的操作

 //載入事件
 protected void Page_Load(object sender, EventArgs e)
    {
        //判斷是否為第一次載入
        if (!IsPostBack)
        {
            List<Students> lst = new List<Students>();
            for (int i = 0; i < 50; i++)
            {
                if (i<=20)
                {
                    lst.Add(new Students { ID = i + 1, Name = "小民" + (i + 1), Age = 8, Class = "二年級三班" });
                }
                else if(i<=40&&i>20)
                {
                    lst.Add(new Students { ID = i + 1, Name = "小王" + (i + 1), Age = 10, Class = "三年級三班" });
                }
                else
                {
                    lst.Add(new Students { ID = i + 1, Name = "小紫" + (i + 1), Age = 9, Class = "二年級四班" });
                }
            }
            //grdview_BakingRecord是gridview控制元件的ID
            grdview_BakingRecord.DataSource = lst;
            grdview_BakingRecord.DataBind();
        }
    }
 

我們進行綁定了之後就回到javaScript寫凍結列的程式碼

 $(function () {
            //獲取存放頭部的容器
            var div = $(".fixedHead");
            //獲取頭部
            $("#grdview_BakingRecord tr:eq(0) th").each(function () {
                //進行復制
                var th = $(this)[0].cloneNode(true);
                //獲取gridview中頭部的樣式賦值給複製後的頭部
                var style = getStyle(this);
                $(th).css("width", style.width);
                $(th).css("height", style.height);
                $(th).css("background-color", "white");
                $(th).css("text-align", style.textAlign);
                $(th).css("border", style.border);
                $(th).css("border-right", "0px solid black");
                $(th).css("vertical-align", style.verticalAlign);
                $(th).css("font-size", "14px");
                $(th).css("font-weight", "900");
                $(th).css("padding-left", "1px");
                //追加到存放頭部容器中
                div.append(th);
            });
            $("#grdview_BakingRecord tr:eq(0)").css("color", "white");
            //設定div滾動元素時觸發的事件
            $(".DataShowBox").scroll(function () {
                var div = $(".fixedHead");
                //判斷如果滾動的時候這存放頭部容器不在頂端，就設定外邊距，實現跟隨。
                if (div.position().top < 0) {
                    div.css("margin-top", $(".DataShowBox").scrollTop());
                }
                else {
                    div.css("margin-top", "0px");
                }
            });
        });

        //相容的獲取當前樣式的任意屬性值
        function getStyle(element) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(element, null);
            } else {
                return element.currentStyle;
            }
        }

這樣就可以實現凍結頭部了。大家可以去試一試。