GridView 表头固定的一种实现方法

早晨来公司收到了原部长发来的邮件，一个 .Net 项目遇到了 GridView 不能满足物理设计的问题，让我帮忙看看。通过电话和 PM 了解一下情况，是要实现表头固定的效果，有可能需要纵横两个方面的滚动条。

GridView 先天不足，如果使用自己画表头，这样做 UI 的时间太长了，于是 google 了一下。net_lover 给出了一套解决方法，他的文章当中没有对原理进行说明，我就说说自己的理解和想法吧。

老孟的实现方法，是定义了两个 DIV，上面的 DIV 用来显示表头（HTML 1～2 行），下面的 DIV 用来显示表体（HTML 3～8 行），通过设置 CSS 实现滚动条的效果。在页面加载时，通过 JavaScript 将 GridView 的内容 Clone 一份，再将 Clone 后的节点添加到表头的 DIV 当中，这样是为了使外观风格一致。最关键的一步是，删除表头的 DIV 中除第一行以外的全部 Node（JavaScript 7～10 行），删除表体 DIV 的第一行（JavaScript 12 行）。

这样作的确很方便，但是，如果 GridView 的数据量很大，页面加载的时间将非常长。我们首先要 Clone 全部的节点，然后再删除 N-1 个节点，太废时了。

以下是我调整风格后的代码片段，为了增加阅读性而已。

1<div id="divGridViewHeader">
2</div>
3<div id="divGridViewBody" style="overflow-y: scroll; height: 200px; width: 580px;">
4  <asp:GridView ID="gvScrollDemo" runat="server" Font-Size="12px" BackColor="#FFFFFF"
5    GridLines="Both" CellPadding="4" Width="560">
6    <HeaderStyle BackColor="#EDEDED" Height="26px" />
7  </asp:GridView>
8</div>

 1function initGridView()
 2{
 3    var tbBody = document.getElementById("<%= gvScrollDemo.ClientID %>");
 4    var tbHeader = tbBody.cloneNode(true);
 5    var divHeader = document.getElementById("divGridViewHeader");
 6
 7    for(i = tbHeader.rows.length -1; i > 0;i--)
 8    {
 9        tbHeader.deleteRow(i)
10    }
11
12    tbBody.deleteRow(0)
13    divHeader.appendChild(tbHeader)
14}