发布一个锁定行列的一种方法

功能介绍

可以实现锁定表格的行和列的功能效果和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 onscroll=myScroll（this） id=dMain >

你的控件控件

</div>

<div id=dTop >放置行</div>

<div id=dLeft >放置列</div>

<div id=dMid ></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

}

上一篇：自动填充固定行数的 GridView

下一篇：Nvelocity 实现动态加载 例子