BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好。一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢?javascript
这个需求常见的解决方案是使用表格拼接的方法,这个方案若是要制做静态的网页,或者功能简单的动态页面,逻辑比较简单,技术上也不复杂,很容易实现,可是若是要作成组件,动态功能较多的话,就须要写大量的冗余代码,难以维护,甚至于一个简单的功能,都须要写不少的代码,好比事件处理等,这个方法就显得比较笨拙,灵活性不好,不是一个好的方案。
css
通过长时间的分析研究,各类场景的试验,咱们找到了一个兼容性很是好的解决方案,整体上来说采用的是定位计算的方法,下面贴出代码,而后作个解读。html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function divScroll(scrollDiv){ var scrollLeft = scrollDiv.scrollLeft; document.getElementById("tableDiv_title").scrollLeft = scrollLeft; document.getElementById("tableDiv_body").scrollLeft = scrollLeft; } function divYScroll(scrollYDiv){ var scrollTop = scrollYDiv.scrollTop; document.getElementById("tableDiv_y").scrollTop = scrollTop; } function onwheel(event){ var evt = event||window.event; var bodyDivY = document.getElementById("tableDiv_y"); var scrollDivY = document.getElementById("scrollDiv_y"); if (bodyDivY.scrollHeight>bodyDivY.offsetHeight){ if (evt.deltaY){ bodyDivY.scrollTop = bodyDivY.scrollTop + evt.deltaY*7; scrollDivY.scrollTop = scrollDivY.scrollTop + evt.deltaY*7; }else{ bodyDivY.scrollTop = bodyDivY.scrollTop - evt.wheelDelta/5; scrollDivY.scrollTop = scrollDivY.scrollTop - evt.wheelDelta/5; } } } </script> <style type="text/css"> body { margin:0; padding:0; } table { border-collapse:collapse; border:0; border:none; } table td { border:1px solid #000; overflow:hidden; padding:0 2px; } </style> </head> <body> <div style="width:500px; position:relative; padding-right:18px;"> <div style="position:relative;height:368px;overflow:hidden;width:100%"> <div style="padding-left:108px; width:auto; overflow:hidden; background:#f00;" id="tableDiv_title" > <table border="0" cellspacing="0" cellpadding="0" > <tr> <td style="min-width:30px; max-width:30px; left:0; top:0; width:30px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">000</td> <td style="min-width:74px; max-width:74px; left:30px; top:0; width:74px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">自动表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td> </tr> </table> </div> <div style="overflow:hidden; position:absolute;height:128px; width:100%;" id="tableDiv_y" onmousewheel="onwheel(event);" onwheel="onwheel(event);"> <div style="padding-left:108px; width:auto;overflow:hidden;" id="tableDiv_body"> <table border="0" cellspacing="0" cellpadding="0" > <tr> <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">001</td> <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">自动表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td> </tr> <tr> <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff; position:absolute; z-index:1;">002</td> <td style="min-width:74px; max-width:74px; left:30px; width:74px; overflow:hidden;background-color:#fff; position:absolute; z-index:1;">自动表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td> </tr> <tr> <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">003</td> <td style="min-width:74px; max-width:74px;left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td> </tr> <tr> <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">004</td> <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td> </tr> <tr> <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">005</td> <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td> </tr> <tr> <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">006</td> <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td> </tr> <tr> <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">007</td> <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td> </tr> <tr> <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">008</td> <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td> </tr> <tr> <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">009</td> <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td> </tr> <tr> <td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">010</td> <td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自动</td> <td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td> </tr> </table> </div> </div> <div style="background-color:#eee;overflow:hidden;top:150px; width:100%; z-index:2;position:absolute;"> <div style="margin-left:108px; width:auto;overflow-x:scroll;overflow-y:hidden;" onscroll='divScroll(this);'> <div style="width:630px; height:1px;"></div> </div> </div> </div> <div id="scrollDiv_y" style="display:block; overflow-x:hidden; overflow-y:scroll; position:absolute; top:22px; right:0px; height:118px; padding-bottom:10px;" onscroll='divYScroll(this);'> <div style="width:1px; height:194px;"></div> </div> </div> </div> </body> </html>
1、整体结构:java
页面基本元素为DIV+TABLE,固定的列采用绝对定位的方式固定,每一列都要指定固定宽度,为了解决横竖滚动条的问题,表头和表体的外面分别包裹两层DIV,滚动条采用虚拟的方式,固定在固定位置经过JS控制模拟正常DIV滚动条的效果。浏览器
2、定位:架构
固定的列要绝对定位,经过left属性控制左侧位移,为了保证固定列浮动在上方,设置z-index为1,。为了保证有竖滚动条时的正常显示,表体的外层DIV为绝对定位,由此致使滚动条也都要绝对定位。还有,表头和表体以及滚动条的内层DIV经过margin-left属性控制左侧外边距,把固定列的偏移量空余出来。
ui
2、宽度计算:this
每一列的宽度都要指定固定的值,而且要注意一个关键点,就是还要加上min-width和max-width属性,这两个属性和width值相等,表头表体的内层DIV,宽度为auto,自适应表格宽度,外层DIV宽度为100%,最外层的DIV经过padding-right属性控制右侧内边距,将竖滚动条的位置空余出来。
spa
3、高度计算:设计
由于绝对定位的存在,整个表格组件的高度要指定,能够经过计算得出,竖滚动条的top值也须要进行计算。
4、滚动条:
本方案一个突出特色,就是虚拟的滚动条,就是经过一个和表格同样宽、高度为一个像素的DIV模拟出表体DIV的横向滚动条,竖滚动条同理。之因此采用这个形式,一个是横向滚动条这样处理比较美观,竖滚动条这样处理以后,表头和表体的外层DIV宽度不用计算了,都为100%,不然存在滚动条时,表头和横向滚动条要空出竖滚动条宽度的位移,不然没法对齐,这个计算倒不复杂,可是某些状况下存在问题,在此不展开了。
5、滚动事件:
由于表体的滚动条都隐藏了,致使鼠标滚轮不起做用了,这样就须要用JS处理鼠标滚轮事件,本文的样例代码兼容常见浏览器。这里的重点是同时写了onmousewheel和onwheel事件,onmousewheel兼容IE,在计算滚动距离时,注意deltaY和wheelDelta属性的差别便可。
6、优缺点分析:
本文的解决方案已经通过精简,重点是讲清楚原理,在咱们的实际中,很是的复杂。这个设计考虑了很是多的兼容性,包括了浏览器的兼容性和各类场景的兼容性,若是需求简单,还有简化的空间。
这个方案的优势是,若是要作组件的话,由于HTML结构简单,表头和表体都是一个TABLE,JS控制代码很是干净,维护容易。缺点就是计算过多。咱们认为该方案比较适用于开发组件的状况,静态页面就有点小题大做了。