当前位置:
文档之家› 基于jquery的表头固定的若干方法
基于jquery的表头固定的若干方法
基于jquery的表头固定的若干方法
阅读:96次时间:2011-11-24 14:17:08 字体:[大中小]
A:使用JQuery UI插件,用DIV替换table,overflow-y:hidden达到滚动,让thead绝对定位达到固定的目的,方法如下:复制代码代码如下:
(function($){
$.chromatable = {
defaults: {
width: "900px",
height: "300px",
scrolling: "yes"
}
};
$.fn.chromatable = function(options){
var options = $.extend({}, $.chromatable.defaults, options);
return this.each(function(){
var $this = $(this);
var $uniqueID = $(this).attr("ID") + ("wrapper");
$(this).css('width', options.width).addClass("_scrolling");
$(this).wrap('
');
$(".scrolling_outer").css({'position':'relative'});
$("#"+$uniqueID).css(
{'border':'1px solid #CCCCCC',
'overflow-x':'hidden',
'overflow-y':'auto',
'padding-right':'17px'
});
$("#"+$uniqueID).css('height', options.height);
$("#"+$uniqueID).css('width', options.width);
$(this).before($(this).clone().attr("id", "").addClass("_thead").css(
{'width' : 'auto',
'display' : 'block',
'position':'absolute',
'border':'none',
'border-bottom':'1px solid #CCC',
'top':'1px'
}));
$('._thead').children('tbody').remove();
$(this).each(function( $this ){
if (options.width == "100%" || options.width == "auto") {
$("#"+$uniqueID).css({'padding-right':'0px'});
}
if (options.scrolling == "no") {
$("#"+$uniqueID).before('Expand table');
$("#"+$uniqueID).css({'padding-right':'0px'});
$(".expander").each(
function(int){
$(this).attr("ID", int);
$( this ).bind ("click",function(){
$("#"+$uniqueID).css({'height':'auto'});
$("#"+$uniqueID+" ._thead").remove();
$(this).remove();
});
});
$("#"+$uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden"); }
});
$curr = $this.prev();
$("thead:eq(0)>tr th",this).each( function (i) {
$("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
});
if (options.width == "100%" || "auto"){
$(window).resize(function(){
resizer($this);
});
}
});
};
function resizer($this) {
$curr = $this.prev();
$("thead:eq(0)>tr th", $this).each( function (i) {
$("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
});
};
})(jQuery);
页面调用如下:
复制代码代码如下:
...
$(function(){
$("#yourTableID").chromatable({
width: "900px",
height: "400px",
scrolling: "yes"
});
});
...
Check out this header | Look here's another one | Wow, look at me! |
---|
Some content goes in here | Praesent vitae ligula nec orci pretium vestibulum | Maecenas tempus dictum libero |
...
Quisque in wisi quis orci tincidunt fermentum | Mauris aliquet mattis metus | Etiam eu ante non leo egestas nonummy |
此方法IE和FF的兼容性都很好,推荐。
B:利用css滤镜实现,但FF不支持微软的东西,不兼容。DOM如下:
复制代码代码如下:
New Document .scrollColThead {position: relative;top: expression(this.parentElement.parentElement.parentElement.scrollTop);z-index:2; height:20px;}
/*行列交叉的地方*/
.scrollCR { z-index:3;}
/*div外框*/
.scrollDiv {height:200px;clear: both; border: 1px solid #EEEEEE;OVERFLOW: scroll;width: 500px; }
/*行头居中*/
.scrollColThead td,.scrollColThead th
{ text-align: center ;}
/*行头列头背景*/
.scrollRowThead,.scrollColThead td,.scrollColThead th
{background-color:EEEEEE; height:20px;}
/*表格的线*/
.scrolltable{
border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; }
/*单元格的线等*/
.scrolltable td,.scrollTable th{
border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5px; }
-->
C:最简单的方法当然是写2个table,用DIV的overflow-y:auto来实现,兼容性绝对没问题,麻烦之处在于2个table的对齐问题,另外用脚本赋予高度的话,需要加onresize()方法。DOM如下:
复制代码代码如下:
无标题文档*,body,form,ul,li,p,h1,h2,h3,h4,h5,h6 {margin:0px;padding:0px;}
body, td, th, input, select,p,span{font-family:"微软雅黑",Arial, Helvetica, sans-serif;}
body,td,div{font-size:12px;color:#333; line-height:150%;-webkit-text-size-adjust:none;}
select{ font-size:12px;}
a {blr:expression(this.onFocus=this.blur()); font-family:"微软雅黑",Arial, Helvetica, sans-serif; font-size:12px; } a:link, a:visited {text-decoration:none;color:#333;}
a:hover, a:active {text-decoration:underline;color:#F00;}
ul,li,ol{list-style-type:none;}img {border:none;}
html{ overflow:hidden;}
.header{ width:1000px; margin:auto; height:40px; background:#ccc;}
.mainer{ width:1000px; margin:auto; height:auto; overflow-y:scroll;overflow-x:hidden;}
function OnResize() {
$(".mainer").height($(window).height() - 40);
}
$(function () {
onreszie();
});