锁定行列的html插件,如何实现行列的锁定

功能介绍：

可以实现锁定表格的行和列的功能，效果和Excel里的冻结窗格类似，当然没有Excel那么强大了，只是类似。

问题：

当一个table太大而导致在屏幕里显示不下的时候，IE会出现滚动条，但是这时候就不好看了，对用户的操作也不是很方便。于是我们就想给他加一个限制，在制定的范围内滚动。

如何实现呢?网上也有不少实现方法了，效果如何就不发表意见了，这里主要是想说一下我的思路。

思路：

1、其实思路很简单，div有一个“功能”，给他的style 加上 "CLEAR： none; OVERFLOW： auto; WIDTH： 100px; HEIGHT：100px" 后，div就会出现滚动条(当然要在div里的内容超出div设置的时候)。这样div里的table 就可滚动了。但是行和列也以一起跟着动了起来。

2、行和列如何“锁定”呢?这里我用了一个笨招，用三个div来分别放置行和列，以及行列交叉的地方。这样看起来就像是别锁定住了。

3、当然行和列并不是不动就可以了，也要根据div的滚动条的滚动作出变化(移动)才可以，这里就要使用js来帮忙了。

优点：

1、侵入性小。只需要在。aspx页面里加几个div，引用一个。js文件就可以了。其他的文件里的代码都不用修改。

2、适用范围比较广：针对生成的 标签，而不针对服务器控件，所以DataGrd、GridView、DataList等都可以使用，只要输出的是 table 形式的html代码就可以。

3、可以同时锁定行和列，行数和列数可以自定义。“锁定”效果好，不会出现“跳动”的现象。

缺点：

1、占用客户端的资源比较大，行数多的时候会有一点点慢。

2、不支持ff.

js的能力还是不够强，目前只能这样了，但这不是最终的结果，还是要更新升级的。发出来也是想请各路高手指点一二。

说了这么多了，可能大家还是没有看明白，不好意思，表达能力比较差。发代码看看吧，呵呵。

。aspx文件里面需要加的代码：

你的控件控件

放置行

放置列

js 文件里的代码：

function myLoad()

{

if (document.getElementById("dMain"))

divInit();

}

function myResize()

{

if (document.getElementById("dMain"))

{

divInit();

}

}

function divInit()

{

var dMain = document.getElementById("dMain"); //主Div

var dTop = document.getElementById("dTop"); //锁定行的Div

var dLeft = document.getElementById("dLeft"); //锁定列的Div

var dMid = document.getElementById("dMid"); //左上角的Div

var windowWidth = document.body.scrollWidth;

var windowHeight = document.body.clientHeight;

//alert(windowWidth);

dMain.style.background="#ffffff";

//alert(windowHeight);

dMain.style.width = windowWidth - 12;

//修正

var sch = document.getElementById("div_Search");

//alert(sch.scrollHeight);

if (sch.style.display == "")

{

dMain.style.height = windowHeight - 100 - sch.scrollHeight;

}

else

{

dMain.style.height = windowHeight - 120;

}

//dMain.style.display = "none";

//寻找Top 和 Left

var tt = dMain; // 寻找左上角的坐标，代码来自梅花雪的日期控件

var th = tt;

var ttop = tt.offsetTop;

var thei = tt.clientHeight;

var tleft = tt.offsetLeft;

var ttyp = tt.type;

while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}

var myTop = (ttyp=="image")? ttop+thei ： ttop+thei+6; //左上角的坐标

var myLeft = tleft; //左上角的坐标

//===================================寻找完毕===============

hh = dMain.style.height; //修正

hh = hh.replace("px"，"");

myTop = myTop - hh + 12;

var dg = document.getElementById("DG"); //显示数据的表格

var RowsCount = "1"; //锁定行数

var LineCount = "1"; //锁定列数

//锁定行的高度

var RowsHeight = dg.rows[RowsCount].cells[0].offsetTop - dg.rows[0].cells[0].offsetTop + 2

//锁定列的宽度

var LineWidth = dg.rows[0].cells[LineCount].offsetLeft - dg.rows[0].cells[0].offsetLeft + 2

//锁定列的高度

var LineHeight = dMain.style.height;

LineHeight = LineHeight.replace("px"，"");

//锁定行的宽度

var RowsWidth = dMain.style.width;

RowsWidth = RowsWidth.replace("px"，"");

//hh = parseint(hh);

//赋值

divResize(dMain，dTop，dLeft，dMid);

if (RowsHeight <25)

RowsHeight = 25;

if (LineWidth <20)

LineWidth = 20;

dTop.style.width = RowsWidth - 16;

dTop.style.height = RowsHeight;

dLeft.style.width = LineWidth;

dLeft.style.height = LineHeight - 16;

dMid.style.width = LineWidth ;

dMid.style.height = RowsHeight;

//设置左上角的位置

dTop.style.top = myTop ;

dTop.style.left = myLeft ;

dLeft.style.top = myTop;

dLeft.style.left = myLeft;

dMid.style.top = myTop;

dMid.style.left = myLeft;

}

function divResize(dMain，dTop，dLeft，dMid)

{

dTop.innerHTML = dMain.innerHTML;

dMid.innerHTML = dMain.innerHTML;

dLeft.innerHTML = dMain.innerHTML;

dLeft = dMain;

}

function divResize2(dMain，dLeft)

{

dLeft.innerHTML = dMain.innerHTML;

}

function myScroll(me)

{

var dTop = document.getElementById("dTop");

var dLeft = document.getElementById("dLeft");

var dMid = document.getElementById("dMid"); //左上角的Div

dTop.scrollLeft = me.scrollLeft;

dLeft.scrollTop = me.scrollTop;

//dMid.scrollLeft = me.scrollLeft;

//dMid.scrollTop = me.scrollTop;

}

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自：IT专家网