asp.net GridView冻结头部

首先我们先创建一个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;
            }
        }

这样就可以实现冻结头部了。大家可以去试一试。