JavaScript Table行定位效果


上次做table排序对table有了一些了解,这次更是深入了解了一番,发现table原来是这么不简单。
还不清楚这个效果叫什么,就叫行定位吧,本来想把列定位也做出来,但暂时还没这个需求,等以后有时间再弄吧。
程序原理
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。
首先想到的方法是给tr设置relative,用ie6/7测试以下代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。
ps:该效果用来做tr的拖动会很方便。
接着想到的是给table插入一个新tr,克隆原来的tr,并设置这个tr为fixed(ie6为absolute),例如:
Code

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。
ps:fixed的相关应用可参考如需引入外部Js需刷新才能执行]

只要给table设置width(style或本身的width属性),不管设置padding和border是多少,offsetWidth都等于width的值。
经测量offsetWidth是没错的,那就是说是table的width设置的问题。
如需引入外部Js需刷新才能执行]

这里还可以看到如果同时设置table的border和style的border,那table的border就会失效。

程序中为了更美观会自动去掉新table上面和下面的边框,包括frame和style的:
Code
复制代码 代码如下:

if(this._oTable.border > 0){
switch (this._oTable.frame) {
case "above" :
case "below" :
case "hsides" :
this._nTable.frame = "void"; break;
case "" :
case "border" :
case "box" :
this._nTable.frame = "vsides"; break;
}
}
this._style.borderTopWidth = this._style.borderBottomWidth = 0;


其中空值在设置collapse之后会比较麻烦,在ie6/ie7中测试:

Code

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


后两个的转换还可以接受,所以在设置frame之前还是判断一下border先。


【获取背景色】

如果td是背景透明的话显然不太美观,最好是找一个合适的颜色来填充。
程序用的方法是,从当前td开始找,如果背景是透明的话,就再从父节点中找,直到找到有背景色为止。
一般来说透明的属性值是"transparent",但在chrome里却是"rgba(0, 0, 0, 0)",所以用了一个属性来保存透明值:
复制代码 代码如下:

this._transparent = isChrome ? "rgba(0, 0, 0, 0)" : "transparent";

并在GetBgColor获取背景色程序中使用:
复制代码 代码如下:

while (bgc == this._transparent && (node = node.parentNode) != document) {
bgc = CurrentStyle(node).backgroundColor;
}
return bgc == this._transparent ? "#fff" : bgc;

如果全部都是透明的话就会返回白色(#fff)。
这里没有考虑图片背景的情况,毕竟图片不一定会覆盖整个背景。
【parentNode/offsetParent/parentElement】

上面用到了parentNode,这里顺便说说它跟offsetParent,parentElement的区别。
先看看如需引入外部Js需刷新才能执行]


可见offsetParent跟parentNode的区别还是很大的。

而parentNode跟parentElement除了前者是w3c标准,后者只ie支持,其他的区别就不是那么明显了。
在ie中大部分情况下两者的效果是一样的,当然如果是一模一样的话ie就没必要弄这么一个东西出来了,测试下面的代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

可以看到当父节点的如需引入外部Js需刷新才能执行]

可以看到使用collapse之后,相邻td的边框都合并成一条而且是以相邻边框中宽度较大的那条为准。
那td跟table之间呢,参考下面的例子:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

可见table和td之间也是遵从同样规则。
还有的是当设置了collapse那cellspacing就无效了。顺便说说border-spacing,它其实就是cellspacing在css中的样式形式,只是ie在ie8才开始支持,详细可以看如需引入外部Js需刷新才能执行]

前者用的collapse,后者是用table背景色模拟,虽然效果都一样,但前者显然较好,才是真正的“边框”。

在使用了collapse之后,要写一个通用的获取边框宽度程序会变得十分麻烦,而且有些情况下甚至没办法判断获取。
详细情况这里就不细说了,有兴趣研究的话可以看看如需引入外部Js需刷新才能执行]
程序中如果支持getBoundingClientRect就会用它来获取位置参数:

复制代码 代码如下:

//用getBoundingClientRect获取原table位置
var top = this._doc.scrollTop, rect = this._oTable.getBoundingClientRect();
this._oTableLeft = rect.left + this._doc.scrollLeft;
this._oTableTop = rect.top + top;
this._oTableBottom = rect.bottom + top;
//获取原tr位置
rect = this._oRow.getBoundingClientRect();
this._oRowTop = rect.top + top;
this._oRowBottom = rect.bottom + top;

显然用getBoundingClientRect更方便快捷。
这个方法虽然是ie的产物,但已经是w3c的标准,而且ff3和Opera都已经支持了这个方法,基本可以放心使用,除了chrome。
这里只是简单介绍,想了解更多可以看如需引入外部Js需刷新才能执行]
可以看到,即使是iframe,在拖动滚动条的时候,select仍然在后面闪啊闪,在本程序中这个现象会尤其明显。
看来还得用隐藏select的方法,最好的做法是只隐藏在新table后面的select,而不影响其他select的正常显示。
那关键就是如何判断select是否在新table后面,这个可以通过位置坐标判断,刚好可以用到上面的getBoundingClientRect。
一般的思路是判断新table和select的坐标,根据位置判断select的显示和隐藏。
但如果有多个实例,可能会导致select在一个实例中要隐藏,却在另一个要显示的情况。

为了解决冲突,程序给select加了一个_count属性作为计数器,用来记录有多少实例把该select隐藏了。
如果当前实例判断该select要隐藏,就给其_count加1,隐藏后存放到实例的_selects集合中。
在恢复显示_selects中的select时,先给select的_count减1,如果得到的_count是0,那说明没有其他实例要隐藏它,就可以设置显示了,最后清空_selects集合。
在判断是否隐藏select前还必须恢复一次该实例_selects里面的select,否则就会造成_count只加不减的情况。

程序中的SetSelect方法就是用来判断和设置select的:
复制代码 代码如下:

this.ResetSelect();
var rect = this._nTable.getBoundingClientRect();
//把需要隐藏的放到_selects集合
this._selects = Filter(this._oTable.getElementsByTagName("select"), Bind(this, function(o){
var r = o.getBoundingClientRect();
if(r.top <= rect.bottom && r.bottom >= rect.top){
o._count ? o._count++ : (o._count = 1);//防止多个实例冲突
//设置隐藏
var visi = o.style.visibility;
if(visi != "hidden"){ o._css = visi; o.style.visibility = "hidden"; }

return true;
}
}))

其中ResetSelect方法是用来恢复显示select的:

复制代码 代码如下:

forEach(this._selects, function(o){ !--o._count && (o.style.visibility = o._css); });
this._selects = [];

但这个方法在快速滚屏时还是无能为力,而且select越多效率也随之下降,各位有更好方法的话欢迎交流。

【Chrome一个bug】

在测试的时候发现Chrome一个bug,测试下面代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

一个毫不相干的操作居然令table没有自动撑开,加上前面的问题,看来Chrome的路还很长啊。


使用说明

实例化一个TableFixed对象只需要一个参数table的id:

new TableFixed("idTable");


实例化时有4个可选属性:
Index: 0,//tr索引
Auto: true,//是否自动定位
Pos: 0,//自定义定位位置百分比(0到1)
Hide: false//是否隐藏(不显示)

其中Index和Pos在实例化之后就不能使用。
要修改克隆行可以用Clone方法,其参数是要克隆tr的索引。
要修改自定义定位位置可以用SetPos方法,其参数是要定位的位置百分比。

具体使用请参考实例。


程序源码


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下载完成测试代码
转载请注明出处:http://www.cnblogs.com/cloudgamer/


« 
» 
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3