用javascript实现gridview的固定表头

在使用gridview时经常会遇到,要求表头固定,内容可移动的要求.通过在网上查询加自己的理解,整理成下面的javascript代码.

    <script type="text/javascript">

        function s()

        {

         var t = document.getElementById("<%=GridView1.ClientID%>");

         var t2 = t.cloneNode(true)

         if (t2.rows.length>:pagesize){       //因为我的程序有分页,所以要做个判断.如果没有分页直接用下面else部分的就可以了.

             for(i = :pagesize;i > 1;i--)    

             {t2.deleteRow(i)}

             t.deleteRow(0)   //因为我的程序在gridview有页数信息显示,所以先删掉page信息.

             t.deleteRow(0)   //这行才是删除表头.要注意的是.gridview将原来的第一行(page信息)删掉后,表头就成了第一行.

         }

         else{        

             for(i = t2.rows.length -1;i > 0;i--)    

             {t2.deleteRow(i)}

             t.deleteRow(0)

         }   

         a.appendChild(t2)

        }

        window.onload = s

    </script>

上面代码的意思就是将gridview复制一份,并把内容都删掉,只留表头,然后原来的gridview将表头删掉.这样就可以用<div>只控制内容滚动了.然后在控件”a”的位置.加上表头.

然后在gridview的上面加上<div id="a"> </div>

<div style="overflow: auto;width:995;Height:380px;"> 这是用来生成滚动条的.

注意一点就是上面<div>中的宽度要比gridview的宽度大15个象素左右.这样才能不会因为内容多了滚动条而不能和表头对齐了.