Repeater实现锁定行、列的滚动效果
来源：互联网 发布：linux主机管理系统 编辑：程序博客网 时间：2024/06/04 18:54
前段时间因公司需要，需要实现一个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>
0 0
- Repeater实现锁定行、列的滚动效果
- js锁定表头和列，实现类似execl锁定效果
- Ext实现表格列头冻结效果，锁定列头
- Javascript实现列表中列的滚动效果
- 锁定dataGridView左边的列，使锁定的列不随水平滚动条滚动
- 锁定dataGridView左边的列，使锁定的列不随水平滚动条滚动
- Repeater控件嵌套效果的实现
- 如何实现repeater的走马灯效果
- datagridview实现列锁定
- Table 锁定列，锁定行
- flex中datagrid列滚动锁定
- flex中datagrid列滚动锁定
- 别踩白块滚动效果的实现
- repeater实现多列显示
- Repeater 实现 DataList 多列
- Repeater连接数据库表的实现隐藏显示列,移动列顺序,列宽
- 用REPEATER实现选定任意行任意列导入EXCEL
- jquery+css实现锁定列
- PHP 登录【完整代码】
- ubunto开启root账户并开启SSH远程访问
- iOS 9.3 升级后无法真机测试 Could not find Developer Disk Image
- HDU 1181 变形课
- options controlling C dialect
- Repeater实现锁定行、列的滚动效果
- STL之vector
- HP-Socket国产优秀socket通信组件推荐
- 如何把AndroidStudio项目向Eclipse项目迁移
- GitHub学习笔记
- Hadoop集群所有的DataNode都启动不了解决办法
- TP框架----hook（钩子）的使用
- Python列表
- mysql截取汉字首字母
