GridView固定表头的2种方法

做项目的时候，有时候需要实现GridView的表头固定效果，不随滚动条的拖动而被隐藏。

通常的实现方法主要分2种，这里总结一下以作备用：

一、 JavaScript调用实现:

  1.引用 相关JavaScript 和 CSS 文件：

  <script type="text/javascript" src="superTables.js"></script>
  <link href="superTables_Default.css" rel="Stylesheet" type="text/css" />

  2. 添加自定义的 CSS 样式：

<style type="text/css">
         .gridcell{ padding:5px;}
         
         .fakeContainer {
            float: left;
            margin: 5px; 
            border: solid 1px #ccc;
            width: 630px;
            height: 250px;
            background-color: #ffffff;
            overflow: hidden;
        }
    </style>

 

  3.在 GridView 网格控件的下面添加 JavaScript 控制代码：

<script type="text/javascript">
var grid = document.getElementById("grid_Report");
if(grid != null && grid != undefined){
   grid.parentNode.className = "fakeContainer";
(function() {
    var start = new Date();
    superTable("grid_Report", {
        cssSkin : "Default",
       fixedCols : 1,
       onFinish : function () 
       {       
            if (this.fixedCols == 0) 
            {
                for (var i=0, j=this.sDataTable.tBodies[0].rows.length; i<j; i++) 
                {
                    this.sDataTable.tBodies[0].rows[i].onclick = function (i) 
                    {
                        var clicked = false;
                        var dataRow = this.sDataTable.tBodies[0].rows[i];
                        
                        return function () 
                        {
                            if (clicked) 
                            {
                                dataRow.style.backgroundColor = "#ffffff";
                                clicked = false;
                            }
                            else 
                            {
                                dataRow.style.backgroundColor = "#eeeeee";
                                clicked = true;
                            }
                        }
                    }.call(this, i);
                }
            }
            else 
            {
                for (var i=0, j=this.sDataTable.tBodies[0].rows.length; i<j; i++) 
                {
                    if(i % 2 == 0){
                      this.sDataTable.tBodies[0].rows[i].style.backgroundColor = "#f5ffef";
                    }
                    if(i >=(j - 2)){
                      this.sDataTable.tBodies[0].rows[i].style.backgroundColor ="#eeeeee";//"#ffffd2";
                    }                   
                    this.sDataTable.tBodies[0].rows[i].onclick = this.sFDataTable.tBodies[0].rows[i].onclick = function (i) 
                    {
                        var clicked = false;
                        var dataRow = this.sDataTable.tBodies[0].rows[i];
                        var fixedRow = this.sFDataTable.tBodies[0].rows[i];
                        return function () 
                        {
                            if (clicked) 
                            {
                                clicked = false;
                            }
                            else 
                            {
                                clicked = true;
                            }
                        }
                    }.call(this, i);
                }
            }           
            return this;
       }
    });
})();
}
</script>

二、CSS控制实现：

1.样式代码：

<style type="text/css"> 
.Freezing 
   {    
   position:relative ; 
   table-layout:fixed;
   top:expression(this.offsetParent.scrollTop);   
   z-index: 10;
   }
.Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
</style>

2.将GridView包含在具滚动条的DIV中

<div style="overflow-y: scroll; height: 200px;width:300px" id="dvBody">

    <asp:GridView ID="GridView1" .......

    </asp:GridView>
</div>

3.给GridView的表头属性“HeaderStyle”设置样式

<HeaderStyle CssClass="Freezing"/>

个人感觉着2种方法各有优缺点，JS控制最终效果比较理想，表头、指定列均可设固定，但是JS代码稍显复杂，如果想要增加自定义效果，仍然需要改进。

而CSS控制比较简单易用，利于代码精简。