2024年6月4日发(作者：)
基于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"
}
};
$.table = function(options){
var options = $.extend({}, $.ts, options);
return (function(){
var $this = $(this);
var $uniqueID = $(this).attr("ID") + ("wrapper");
$(this).css('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', );
$("#"+$uniqueID).css('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 ( == "100%" || == "auto") {
$("#"+$uniqueID).css({'padding-right':'0px'});
}
if (ing == "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 = $();
$("thead:eq(0)>tr th",this).each( function (i) {
$("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
});
if ( == "100%" || "auto"){
$(window).resize(function(){
resizer($this);
});
}
});
};
function resizer($this) {
$curr = $();
$("thead:eq(0)>tr th", $this).each( function (i) {
$("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
});
};
})(jQuery);
页面调用如下：
复制代码代码如下:
...