• 智能浮动表头


    //实现表头智能浮动,容器如果指定则在容器中浮动,不指定则在window中浮动
    //要求表格要有thead部份
    //调用:
    //$("#table1").smartFloatTableHeader(document.getElementById('table1').parentNode);
    $.fn.smartFloatTableHeader = function (container) {
        if (!container) container = window;
        if (typeof (container) == 'string') {
            container = document.getElementById(container);
        }
        var smartFloat = function (element) {
            var newTable = element.clone();                 //复制一个新的表格出来
            newTable.find('tbody').hide();                  //表体隐藏
            newTable.css({  element.width() });       //设置复制出来的表格与源表格同宽度(某些控件生成的表格未设置宽度)
            $(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.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));
        });
    };

  • 相关阅读:
    C#设置窗体最大化且不遮挡任务栏的方法
    C# Base64解码 二进制输出
    导出Excel并下载,但无法定制样式的方法!
    C# List 转Datatable
    查询sql语句耗时的方法!
    301跳转
    文章关键字加链接
    文本框样式默认文本
    JForum二次开发(一)
    MongoDB 学习笔记(三)—— 修改器的使用
  • 原文地址:https://www.cnblogs.com/apollokk/p/6713808.html
Copyright © 2020-2023  润新知