您的位置:首页 > Web前端 > JavaScript

智能浮动表头

2016-06-20 10:01 369 查看
/// <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));
    });
};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript 浮动 表格