前段时间因公司需要,需要实现一个Repeater下的锁定行、列滚动效果 ,网上找了一些实现的滚动效果的代码,测试下来发现网页的刷新速度降低了好多,当数据比较大(30列,300行时)页面还一度出现假死状态。用户体验效果太差。
然后就决定自己写一下方法,看一下,能否实现效果,经过多次测试终于完成了此功能。
代码主要用到DIV+CSS,利用DIV的多层重叠效果实现。
DIV “DivMain” 实现滚动条效果,绑定 onScroll事件
DIV "DivDataTable" 所有数据展示,需要的数据全部读取到此DIV内,Repeater也在此DIV内
DIV "div_Top" 使用代码Clone 主DIV内的Repeater标题行,用于实现上下滚动时,列自动向下移动,需要锁住几行就Clone几行
DIV "divLeft" 使用代码Clone 主DIV内Repeater的列,需要锁住几列就Clone几列
Div “divLeftTitle” 使用代码Clone "divLeft" DIV内的标题行,用于滚动条上下 、左右交叉移动时,显示被锁住的列标题(即 "divLeft"的标题行)
预设各部分对应的CSS,然后由JS代码在onScroll事件内控制各DIV部分变动
我目前只做到了IE10、IE11效果调试,其它浏览器与IE版本需要单独调配CSS样式,这个就请各位自己完成了。哈,
PS: 本人JS、CSS都比较菜
代码如下(因为无法贴原代码,以下代码是我简化后的效果):
<html> <head> <script language="javascript" type="text/javascript"> var DivMainLeft = 0; var DivMainTop = 0; function testScroll() { var TOP = document.getElementById("div_Top"); DivMainTop = document.getElementById('DivMain').scrollTop; TOP.style.top = DivMainTop + "px"; var LEFT = document.getElementById("divLeft"); var CurrentDivMainLeft = document.getElementById('DivMain').scrollLeft if (DivMainLeft != CurrentDivMainLeft) { LEFT.style.left = CurrentDivMainLeft + "px"; DivMainLeft = CurrentDivMainLeft; } if ((DivMainLeft != 0 && DivMainTop != 0) || DivMainTop>0) { var DivLeftTitle = document.getElementById("divLeftTitle"); DivLeftTitle.style.display = "block"; DivLeftTitle.style.zIndex = "1000"; DivLeftTitle.style.top = TOP.style.top; DivLeftTitle.style.left = LEFT.style.left; } if (DivMainTop == 0) { document.getElementById("divLeftTitle").style.display = "none"; } var browser = navigator.userAgent; var version = browser.split(";"); var trim_Version = version[3].replace(/[ ]/g, ""); if (trim_Version == "Trident/6.0") { if (document.getElementById('DivMain').scrollTop == 0) { LEFT.style.top = "1px"; var Tb_Left = document.getElementById("tb_SheBianDetail_LEFT"); var TB_Tr = Tb_Left.getElementsByTagName("tr"); TB_Tr[0].style.height = "30px"; for (i = 1; i < TB_Tr.length; i++) { TB_Tr[i].style.height = "40px"; } } else { LEFT.style.top = "8px"; //此处,需要是运行的Win7 的IIS,是8PX,如果是Win2008的IIS,是0px var Tb_Left = document.getElementById("tb_SheBianDetail_LEFT"); var TB_Tr = Tb_Left.getElementsByTagName("tr"); TB_Tr[0].style.height = "30px"; for (i = 1; i < TB_Tr.length; i++) { TB_Tr[i].style.height = "42px"; //此处如果是运行在Win7 的IIS,是42PX,如果是Win2008的IIS是41PX } } } else { LEFT.style.top = "0px"; } } </script> <title>表格锁定行、列</title></head> <style type="text/css"> #tb_SheBianDetail td , #tb_SheBianDetail_Top td , #tb_SheBianDetail_LEFT td,tb_SheBianDetail_LEFT_Title td { border:1px solid gray; padding:0px; border-spacing:0px; text-align:center; border-collapse:collapse; } #tb_SheBianDetail tr , #tb_SheBianDetail_Top tr , #tb_SheBianDetail_LEFT tr,tb_SheBianDetail_LEFT_Title tr { height:40px; } .SheBianDetail_Materal_Info { width:100px; } .SheBianDetail_RowNo { width:60px; } </style> <body > <div> <div class="PageInputObjectBorder" id="DivMain" style="overflow:scroll; position:relative;width:500px; height:200px;" onscroll="testScroll()"> <div class="PageInputObjectBorder" id="DivDataTable" style="position:absolute;"> <table id="tb_SheBianDetail" style="width:3100px; border-collapse:collapse;"> <tr style="background-color:Blue;"> <td class="SheBianDetail_RowNo ">NO</td> <td class="SheBianDetail_Materal_Info ">列1</td> <td class="SheBianDetail_Materal_Info ">列2</td> <td class="SheBianDetail_Materal_Info ">列3</td> <td class="SheBianDetail_Materal_Info ">列4</td> <td class="SheBianDetail_Materal_Info ">列5</td> <td class="SheBianDetail_Materal_Info ">列6</td> <td class="SheBianDetail_Materal_Info ">列7</td> <td class="SheBianDetail_Materal_Info ">列8</td> </tr> <tr style="background-color:#ddf0ed;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#eee8ab;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#ddf0ed;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#eee8ab;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#ddf0ed;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#eee8ab;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#ddf0ed;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> </table> </div> <div id="div_Top" style="position:relative;top:0px; z-index:100;"> <table id="tb_SheBianDetail_Top" style="width:3100px; border-collapse:collapse; background-color:blue;"> <tr> <td class="SheBianDetail_RowNo ">NO</td> <td class="SheBianDetail_Materal_Info ">列1</td> <td class="SheBianDetail_Materal_Info ">列2</td> <td class="SheBianDetail_Materal_Info ">列3</td> <td class="SheBianDetail_Materal_Info ">列4</td> <td class="SheBianDetail_Materal_Info ">列5</td> <td class="SheBianDetail_Materal_Info ">列6</td> <td class="SheBianDetail_Materal_Info ">列7</td> <td class="SheBianDetail_Materal_Info ">列8</td> </tr> </table> </div> <div id="divLeft" style="position:absolute;top:0px;width:200px; float:left; z-index:200; left:0px;border:1px solid red; text-align:left"> <table id="tb_SheBianDetail_LEFT" style="border-collapse:collapse;"> <tr style="background-color:green;"> <td class="SheBianDetail_RowNo ">NO</td> <td class="SheBianDetail_Materal_Info ">列1</td> <td class="SheBianDetail_Materal_Info ">列2</td> </tr> <tr style="background-color:#ddf0ed;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#eee8ab;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#ddf0ed;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#eee8ab;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#ddf0ed;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#eee8ab;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> <tr style="background-color:#ddf0ed;"> <td class="SheBianDetail_RowNo "></td> <td class="SheBianDetail_Materal_Info "></td> <td class="SheBianDetail_Materal_Info "></td> </tr> </table> </div> <div id="divLeftTitle" style="position:absolute;top:0px;width:200px; float:left; z-index:1000; left:0px;border:1px solid #9FEE00; text-align:left; display:none;"> <table id="tb_SheBianDetail_LEFT_Title" style="border-collapse:collapse; background-color:gray;"> <tr height="40px"> <td class="SheBianDetail_RowNo ">NO</td> <td class="SheBianDetail_Materal_Info ">列1</td> <td class="SheBianDetail_Materal_Info ">列2</td> </tr> </table> </div> </div> </div> </form> </body> </html>