BS架構的企業級應用中,當一個表格列數較多時,用戶一個常見的需求就是把前面幾個重要的列固定住,這樣拖動滾動條時固定的列會方便用戶查看數據,使用者體驗很好。一些重量級的JS元件庫也都有這個功能,那麼有沒有更簡單的方法來實現這個功能呢?
這個需求常見的解決方案是使用表格拼接的方法,這個方案如果要製作靜態的網頁,或者功能簡單的動態頁面,邏輯比較簡單,技術上也不復雜,很容易實現,但是如果要做成組件,動態功能較多的話,就需要寫大量的冗餘程式碼,難以維護,甚至於一個簡單的功能,都需要寫很多的程式碼,例如事件處理等,這個方法就顯得比較笨拙,靈活性很差,不是一個好的方案。
經過長時間的分析研究,各種場景的試驗,我們找到了一個兼容性非常好的解決方案,總體上來講採用的是定位計算的方法,下面貼出程式碼,然後做個解讀。
<!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>
一、總體結構:
頁以基本元件為DIV TABLE,固定的列以絕對定位的方式固定,每一列都要指定固定寬度,為了解決橫豎捲軸的問題,表頭和表體的外面分別包裹兩層DIV,外面分別滾動條採虛擬的方式,固定在固定位置透過JS控制模擬正常DIV捲軸的效果。
二、定位:
固定的欄位要絕對定位,並透過left屬性控制左側位移,為了確保固定列浮動在上方,設定z-index為1,。為了確保有垂直滾動條時的正常顯示,表體的外層DIV為絕對定位,因此導致滾動條也都要絕對定位。還有,表頭和表體以及捲軸的內層DIV透過margin-left屬性控制左側外邊距,把固定列的偏移量空餘出來。
二、寬度計算:
每一列的寬度都要指定固定的值,並且要注意一個關鍵點,就是還要加上min-width和max-width屬性,這兩個屬性和width值相等,表頭表體的內層DIV,寬度為auto,自適應表格寬度,外層DIV寬度為100%,最外層的DIV透過padding-right屬性控制右側內邊距,將垂直滾動條的位置空餘出來。
三、高度計算:
因為絕對定位的存在,而整個表格組件的高度要指定,可由計算得出,垂直捲軸的top值也需要計算。
四、捲軸:
本方案一個突出特點,是虛擬的捲軸,就是透過一個和表格一樣寬、高度為一個像素的DIV模擬出表體DIV的橫向滾動條,垂直滾動條同理。之所以採用這個形式,一個是橫向滾動條這樣處理比較美觀,豎滾動條這樣處理之後,表頭和表體的外層DIV寬度不用計算了,都為100%,否則存在滾動條時,表頭和橫向滾動條要空出垂直滾動條寬度的位移,否則無法對齊,這個計算倒不復雜,但是某些情況下存在問題,在此不展開了。
五、滾動事件:
因為表體的捲軸都隱藏了,且導致滑鼠滾輪不起作用了,這樣就需要用JS處理滑鼠滾輪事件,而本文的範例程式碼則相容於常見瀏覽器。這裡的重點是同時寫了onmousewheel和onwheel事件,onmousewheel相容IE,在計算滾動距離時,注意deltaY和wheelDelta屬性的差異即可。
六、優缺點分析:
本文的解答已經經過精簡,重點在於講清楚原理,在我們的實際中,非常的複雜。這個設計考慮了非常多的兼容性,包括了瀏覽器的兼容性和各種場景的兼容性,如果需求簡單,還有簡化的空間。
這個方案的優點是,如果要做組件的話,因為HTML結構簡單,表頭和表體都是一個TABLE,JS控製程式碼非常乾淨,維護容易。缺點就是計算過多。我們認為該方案比較適用於開發元件的情況,靜態頁面就有點小題大作了。
以上所述就是本文的全部內容了,希望大家能夠喜歡。