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记得设置成一样,要是不设置,会出现表头和表格内容对不上的情况。