分享一個基於jQuery的鎖定表格行列的js指令碼。

 

　　網上也有很多鎖定行列的方法，一個是使用css，另一個就是專門的控制元件附帶有鎖定的功能。css的大多數鎖定行，而不能鎖定列。好像看過園子裡的司徒正美，寫過一個用css鎖定行列的，當時css比較爛看不懂，也沒有儲存那個網址（很後悔），現在想要找卻又找不到了。

 

　　另一個就是第三方控制元件，這種控制元件很強大，鎖定行列只是附帶的一個小功能。但是有一個比較明顯的缺點，必須使用它的控制元件，我想鎖定GridView，那就不行了。除非你能把他的鎖定方法給研究出來。

 

　　最近我在學jQuery，我覺得找個需求來學習，進步會比較快，於是就選擇了鎖定行列的這個需求。

 

　　目的：

　　1、針對<table>來鎖定，只要是table標籤的形式都能鎖定。支援GridView等控制元件。

　　2、可以鎖定行、鎖定列、同時鎖定行列、鎖定多行多列。

　　3、使用簡單，無需修改後臺程式碼（後置程式碼）。只需要在前臺稍微做點調整即可。

　　4、效率不能太差，最好支援多種瀏覽器。

 

　　目的確定下來，然後就要想辦法實現了。其實以前也做過兩個版本，因為以前js很爛，也不知道有jQuery這樣的東東，於是就想了一個笨法。先做一個div（divMain），把要鎖定的table放進去，再做三個div，然後把要鎖定的table拷貝到三個div裡面，然後調整div的寬度、高度和位置，分別放在要鎖定的行、列和行列交叉的地方放。然後在寫一個滾動事件，在divMain的滾動條滾動的事件裡，同時滾動上面的div和左面的div。這樣就形成了一個鎖定的效果。

 

　　這個方法的缺點很多了，但是水平很爛，也只能這樣了。現在想要提高一下js水平，那麼就要弄個更好一點的。把整個table都拷貝過去是不是太浪費了？能不能只拷貝要鎖定的行、列？

 

　　於是呢，就要jQuery動態建立div和需要的table，然後調整他們的寬度、高度和位置，這樣在滾動的時候效率就高了很多，不過也有個問題，那就是精確獲取、設定td的高度和寬度，要能夠支援被撐高的td。這個問題困擾了我好久，昨天在群裡得到了各位高手的幫忙，尤其是“紫風鈴”的指點，才得以突破。

 

　　說了這麼多，可能大家都煩了，說一下使用方法。

 

　　1、引用jquery-1.4.2.js

　　2、引用scroll-1.0.js （下載）

　　3、在要鎖定的table外面加上一個div，並且設定id

　　4、呼叫js函式，myScroll(`div_Main`,1,1,`tableID`)

 

　　第一個引數：要鎖定的table外面的div的ID，

　　第二個引數：要鎖定的行數（從上面數），可以是0，表示不鎖定行。

　　第三個引數：要鎖定的列數（從左面數），可以是0，表示不鎖定列。

　　第四個引數：要鎖定的table的ID。

 

　　好了搞定。有幾個注意事項。

 

　　1、如果div裡只有一個table，沒有其他的，那麼可以不傳遞tableID這個引數。

　　2、table的width不能設定百分比的形式，比如100%，這樣很可能造成table被擠在div裡面，沒有橫向的滾動。

　　

 

　　對了，還要說一下缺點：

　　1、程式碼比較爛。初學jQuery，js的功底也很差，所以現在的1.0版本的程式碼只是實現了基本的功能，程式碼的美觀、執行效率那就很差了，以後還需要繼續前進。

　　2、td的高度和寬度還是差了一些，不過基本上可以忍受。還需要繼續調整。

　　3、table的行數比較多時（大於100行），初始化時間會很長。初始化就是建立鎖定的行、列的部分。

 

　　最後是線上演示的地址：http://demo.naturefw.com/Nonline/other/default.aspx 

 

 

 　　下一步除了修改bug外，還要實現交替色、滑鼠跟隨、單擊、雙擊、選擇變色等功能。