發布一個鎖定行列的一種方法

　　功能介紹

　　可以實現鎖定表格的行和列的功能效果和Excel裡的凍結窗格類似當然沒有Excel那麼強大了只是類似

　　問題

　　當一個table太大而導致在屏幕裡顯示不下的時候IE會出現滾動條但是這時候就不好看了對用戶的操作也不是很方便於是我們就想給他加一個限制在制定的范圍內滾動

　　如何實現呢？網上也有不少實現方法了效果如何就不發表意見了這裡主要是想說一下我的思路

　　思路

　　其實思路很簡單div有一個功能給他的style 加上 CLEAR none OVERFLOW auto WIDTH px HEIGHTpx 後div就會出現滾動條（當然要在div裡的內容超出div設置的時候）這樣div裡的table 就可滾動了但是行和列也以一起跟著動了起來

　　行和列如何鎖定呢？這裡我用了一個笨招用三個div來分別放置行和列以及行列交叉的地方這樣看起來就像是別鎖定住了

　　當然行和列並不是不動就可以了也要根據div的滾動條的滾動作出變化（移動）才可以這裡就要使用js來幫忙了

　　優點

　　侵入性小只需要在aspx頁面裡加幾個div引用一個js文件就可以了其他的文件裡的代碼都不用修改

　　適用范圍比較廣針對生成的 <table> 標簽而不針對服務器控件所以DataGrdGridViewDataList等都可以使用只要輸出的是 table 形式的html代碼就可以

　　可以同時鎖定行和列行數和列數可以自定義鎖定效果好不會出現跳動的現象

　　缺點

　　占用客戶端的資源比較大行數多的時候會有一點點慢

　　不支持ff

　　js的能力還是不夠強目前只能這樣了但這不是最終的結果還是要更新升級的發出來也是想請各路高手指點一二

　　說了這麼多了可能大家還是沒有看明白不好意思表達能力比較差發代碼看看吧呵呵

　　aspx文件裡面需要加的代碼

　　你的控件控件

　　</div>

　　js 文件裡的代碼

　　function myLoad（）

　　{

　　if （documentgetElementById（dMain））

　　divInit（）

　　}

　　function myResize（）

　　{

　　if （documentgetElementById（dMain））

　　{

　　divInit（）

　　}

　　function divInit（）

　　{

　　var dMain = documentgetElementById（dMain） //主Div

　　var dTop = documentgetElementById（dTop） //鎖定行的Div

　　var dLeft = documentgetElementById（dLeft） //鎖定列的Div

　　var dMid = documentgetElementById（dMid） //左上角的Div

　　var windowWidth = documentbodyscrollWidth

　　var windowHeight = documentbodyclientHeight

　　//alert（windowWidth）

　　dMainstylebackground=#ffffff

　　//alert（windowHeight）

　　dMainstylewidth = windowWidth

　　//修正

　　var sch = documentgetElementById（div_Search）

　　//alert（schscrollHeight）

　　if （schstyledisplay == ）

　　{

　　dMainstyleheight = windowHeight schscrollHeight

　　}

　　else

　　{

　　dMainstyleheight = windowHeight

　　}

　　//dMainstyledisplay = none

　　//尋找Top 和 Left

　　var tt = dMain // 尋找左上角的坐標代碼來自梅花雪的日期控件

　　var th = tt

　　var ttop = ttoffsetTop

　　var thei = ttclientHeight

　　var tleft = ttoffsetLeft

　　var ttyp = tttype

　　while （tt = ttoffsetParent）{ttop+=ttoffsetTop tleft+=ttoffsetLeft}

　　var myTop = （ttyp==image）？ ttop+thei ttop+thei+ //左上角的坐標

　　var myLeft = tleft //左上角的坐標

　　//===================================尋找完畢===============

　　hh = dMainstyleheight //修正

　　hh = hhreplace（px）

　　myTop = myTop hh +

　　var dg = documentgetElementById（DG） //顯示數據的表格

　　var RowsCount = //鎖定行數

　　var LineCount = //鎖定列數

　　//鎖定行的高度

　　var RowsHeight = dgrows[RowsCount]cells[]offsetTop dgrows[]cells[]offsetTop +

　　//鎖定列的寬度

　　var LineWidth = dgrows[]cells[LineCount]offsetLeft dgrows[]cells[]offsetLeft +

　　//鎖定列的高度

　　var LineHeight = dMainstyleheight

　　LineHeight = LineHeightreplace（px）

　　//鎖定行的寬度

　　var RowsWidth = dMainstylewidth

　　RowsWidth = RowsWidthreplace（px）

　　//hh = parseint（hh）

　　//賦值

　　divResize（dMaindTopdLeftdMid）

　　if （RowsHeight <）

　　RowsHeight =

　　if （LineWidth <）

　　LineWidth =

　　dTopstylewidth = RowsWidth

　　dTopstyleheight = RowsHeight

　　dLeftstylewidth = LineWidth

　　dLeftstyleheight = LineHeight

　　dMidstylewidth = LineWidth

　　dMidstyleheight = RowsHeight

　　//設置左上角的位置

　　dTopstyletop = myTop

　　dTopstyleleft = myLeft

　　dLeftstyletop = myTop

　　dLeftstyleleft = myLeft

　　dMidstyletop = myTop

　　dMidstyleleft = myLeft

　　}

　　function divResize（dMaindTopdLeftdMid）

　　{

　　dTopinnerHTML = dMaininnerHTML

　　dMidinnerHTML = dMaininnerHTML

　　dLeftinnerHTML = dMaininnerHTML

　　dLeft = dMain

　　}

　　function divResize（dMaindLeft）

　　{

　　dLeftinnerHTML = dMaininnerHTML

　　}

　　function myScroll（me）

　　{

　　var dTop = documentgetElementById（dTop）

　　var dLeft = documentgetElementById（dLeft）

　　var dMid = documentgetElementById（dMid） //左上角的Div

　　dTopscrollLeft = mescrollLeft

　　dLeftscrollTop = mescrollTop

　　//dMidscrollLeft = mescrollLeft

　　//dMidscrollTop = mescrollTop

　　}

From:http://tw.wingwit.com/Article/program/net/201311/12481.html