GridView固定表头随列表下移和左右移动

GridView中当列表数据过多时，很多时候就需要表头固定，上网搜了不少，有用CSS的，有用js的，也看了不少评论，说CSS的浏览器兼容性不好，而js的大多是写了只有上下滚动，没有左右滚动的，发现了一个上下左右都有的，分享下。

首先JS代码大多一致，做一个div，然后复制GridView到一个变量中，再把数据行全删掉，再放在div中，然后原GridView删掉表头行。

<script type="text/javascript">

    function init(){

        varbodyGridView = document.getElementById("<%=GridView.ClientID%>");

        varheadGridView = bodyGridView.cloneNode(true);

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

            headGridView.deleteRow(i);            //删除数据行

        bodyGridView.deleteRow(0);               //删掉原GridView表头行

        headdiv.appendChild(headGridView);        //绑定到指定div中，其中headdiv是该div的ID

    }

 

        window.onload = init                      //页面加载时调用上面函数

</script>

 

然后做2个div，然后放GridView本身的div绑定onscroll l="headdiv.scrollLeft=scrollLeft"，这样在放的GridView水平移动时，表头的div也会跟着水平移动了。

<div id="headdiv" style="overflow-x: hidden; overflow-y: scroll"></div>

            <div class="cmg_74 cmgv_29 scroll_table_div" onscroll="headdiv.scrollLeft=scrollLeft">

 

最后记得，GridView中的HeaderStyle-Width和ItemStyle-Width记得设置成一样，要是不设置，会出现表头和表格内容对不上的情况。