/// <reference path="jquery-1.11.3.js" />
//实现表头智能浮动,容器如果指定则在容器中浮动,不指定则在window中浮动
//要求表格要有thead部份
//调用:
//$("#table1").smartFloatTableHeader(document.getElementById('table1').parentNode);
$.fn.smartFloatTableHeader = function (container, removebody) {
if (!container) container = window;
if (typeof (container) == 'string') {
container = document.getElementById(container);
}
var smartFloat = function (element) {
var newTable = element.clone(); //复制一个新的表格出来
if (removebody) {
newTable.find('tbody').remove();
} else {
newTable.find('tbody').hide(); //表体隐藏
}
$(newTable).insertBefore(element).hide(); //先不显示复制出来的表格
$(element).parents().scroll(function () { //监控容器及父元素滚动事件
var containerTop = container == window ? 0 : $(container).offset().top, //容器顶部位置
elementTop = element.offset().top, //最少滚动多少才到隐藏位置
scrolls = $(this).scrollTop(), //滚动高度
emementHeight = $(element).outerHeight(), //元素总高度,考虑可能是动态的,每次滚动时判断
offset = $(element).offset(); //源控件位置
//源表头进入隐藏区域并且表尾未进入隐藏区域时显示复制内容
if (containerTop > elementTop && containerTop < elementTop + emementHeight) {
newTable.css({ width: element.outerWidth() }).show(); //设置复制出来的表格与源表格同宽度(某些控件生成的表格未设置宽度)
if (window.XMLHttpRequest) {
newTable.css({
position: "fixed",
top: containerTop,
left: offset.left
});
} else {//这段针对老式浏览器,未测试
newTable.css({
top: scrolls - containerTop,
left: $(element).position().left
});
}
} else {
newTable.hide();
}
});
};
return $(this).each(function () {
smartFloat($(this));
});
};