本文作者:心月

利用jQuery實現HTML 表格行列凍結

心月IT博客 2019-01-18
摘要:行列凍結是處理表格非常常見的應用,我們都知道用excel可以很輕松的實現這一功能。但html編寫的web網頁表格中并沒有凍結表格這一功能,那又要如何才能實現表格的 行 列 凍結呢?

行列凍結是處理表格非常常見的應用,我們都知道用excel可以很輕松的實現這一功能。但html編寫的web網頁表格中并沒有凍結表格這一功能,那又要如何才能實現表格的'行''列'凍結呢?

通過百度或者其他搜索引擎搜索確實可以找到很多解決案例,比如,把需要凍結的行或者列從表格中拆分出來,然后計算行列的高度和寬度,使得被拆分后的內容組合起來后表面上看去仍然是完整的一張表格;又比如用jquery的插件來實現等等。這些方法雖然最后都能實現行列凍結的效果,但太復雜,而且很容易出錯,一個簡單的表格凍結效果,結果寫了一大推的代碼。

既然博主敢說這些方法不太好,自然是有更好方法可以實現表格凍結效果,下面就來看看心月博主是如何簡單快速的實現web表格行列凍結的。

在解決行列凍結前先來說說表格行列凍結的原理:

在不凍結行列的正常情況下拖動表格時,整個表格都會朝與拖動相反的方向移動(前提是沒有修改系統默認滾動參數設置),比如往下拖動,整張表格網上移動,往右拖動整張表格往左移動,在此情景下如果想保持某一行或某幾行的的位置能一直保持在一個地方,就得把這幾行給拎出來成為一個獨立體,然后往回拖,拖到你想讓他出現的位置,接下來每次把整個表格往下拖動一段距離,前面的獨立體就得往回拖一段距離,而且獨立體往回拖的距離與整個表格往下拖動的距離是相等的。表格列凍結也是如此,不過此時表格拖動的方向是水平方向。

如果沒有看懂表格行列凍結的原理,沒關系,下面就是本次文章的重點內容了:

這里我并沒有使用表格分塊,也沒有使用插件,只有一個table表格和一個div塊,然后給div加上垂直滾動和水平滾動

利用jQuery實現HTML 表格行列凍結

首先需要確定需要凍結的行和列,以及被凍結的行和列需要在什么位置顯示,此次我凍結的是第一行和以及第1到3列,及上圖序號、網站域名、網站名這3列,凍結的顯示的位置是左上角黑白背景交界處。如下圖所示

利用jQuery實現HTML 表格行列凍結

在前面的表格凍結原理中已經知道,表格凍結無非就是:表格滾動——位置回拉;所以,只需要給table外層的div加一個滾動事件,在滾動事件中處理位置回拉即可實現表格凍結。廢話不多說直接上代碼(頁面寬度問題圖片有點小,可以右鍵復制圖片鏈接在新窗口打開看):

前圖表格,白色背景內是可視區域,表格在垂直方向滾動前需要計算出表格頂部距可視區頂部的距離,在表格需要被凍結的行(第一行)滾動到可視區頂部(被凍結后停留位置)前都不需要做位置“回拉處理”,直到表格第一行移動到可視區頂部開始對表格進行“回拉處理”,給第一行加一個相對定位屬性(position:relative)如果給整行加相對定位不起作用就給第一行的每一列單獨加相對定位。然后,整張表格每往下移動1px,就給第一行的left值加1px。

(之所以用相對定位而不用絕對定位,是因為絕對定位的的內容會脫離整個表格,如果非凍結內容和對應的行或者列的寬高不一致就會出現凍結內容和非凍結內容錯位的現象)

因為前面已經計算出表格未滾動時頂部距離可視區頂部的距離,因此只需用滾動的距離減去前面的頂部距離得到的值就是第一行需要回拉的距離,也就是left值。

水平方向也是同樣的道理。

至此,表格行列凍結就實現了,而且此方法可以實現任意行或者任意列的凍結。

如果沒有看明白的話,可以照著圖片給出的代碼敲一遍看看實際效果。(自己動手敲出來的代碼印象才會深,所以在這里代碼就是截圖給出的)。(div table 的id屬性,class屬性截圖中都有,表格第一行是標題行所以用的是th不是td,別忘了引入jq文件。另外為了保證被凍結的行或者列的內容不被遮住一定要加z-index值,保證被凍結行列的內容始終在被凍結單元格之上。另外行列同時凍結時,z-index的最好不要一樣,希望誰的層級高誰的z-index值就大)。

如果凍結的行或者列比較多,且是連續的,可以用循環減少重復代碼。

 

文章版權及轉載聲明:

作者:心月 本文地址:http://www.eojird.tw/jianzhan/76.html發布于 2019-08-22
文章轉載或復制請以超鏈接形式并注明出處心月IT博客

分享到:
贊(

發表評論

快捷輸入:

    評論列表 (有 0 條評論,人圍觀)參與討論