zoukankan      html  css  js  c++  java
  • jsp下拉锁定表头

    最近测试向我提了一个需求,页面显示下拉锁定表头,还要我实现导出excel把表头锁住,这个导出功能是在jsp页面实现的,没有在后台使用POI导出,锁表头功能我实现不了,也不知道能不能实现。下面贴一下页面锁表头的代码

            <script>
                (function($){
                    /**
                     * 表头悬浮插件
                     * @date 2017-07-18 13:17:54
                     */
                    $.fn.fixedTableHeader = function () {
                        var t = $(this);
                        var tableOffset = t.offset().top;
                        // 创建一个表格,设置样式  width="96%" align="center" cellpadding="0" cellspacing="1"
                        var fixed_table = $('<table width="96%" style="margin-left: 2%"></table>').css({ 'display':'none', 'position':'fixed', 'top':'0px', 'background-color':'white' });
                        // 把标题的标题clone过来
                        t.parent().append(fixed_table.append(t.find("thead").clone()));
    
                        // 设置表格属性和样式
                        fixed_table.attr("border",t.attr("border"));
                        fixed_table.css("border-collapse",t.css("border-collapse"));
                        fixed_table.attr("cellspacing",t.attr("cellspacing"));
                        // 设置表格的宽度
                        fixed_table.width(t.outerWidth());
    
                        // 用于判断宽度该加多少
                        if(t.css("border-collapse")=="collapse"){
                            var borderWith = parseInt(t.attr("border"));
                        }else{
                            var borderWith = 0;
                        }
                        // 设置表格悬浮标题单元格的宽度
                        fixed_table.find("th").each(function (i) {
                            var width = t.find("th").eq(i).css("width");
                            $(this).width(parseInt(width)+borderWith+"px");
                        });
    
                        $(window).bind("scroll", function () {
                            var offset = $(this).scrollTop();
                            if (offset >= tableOffset && fixed_table.is(":hidden")) {
                                fixed_table.show();
                            }
                            else if (offset < tableOffset) {
                                fixed_table.hide();
                            }
                        });
                        return t;
                    }
                }(jQuery));
    
                $(function () {
                    $("#myTable").fixedTableHeader();
                })
            </script>
  • 相关阅读:
    爱福窝在线装修设计软件测评
    关于简书首页模式的思考和畅想
    这些O2O比你们更靠谱儿
    iOS动画——Layer Animations
    最大流, 最小割问题及算法实现
    浅谈iOS学习之路
    iOS架构师之路:慎用继承
    iOS架构师之路:控制器(View Controller)瘦身设计
    IOS中的编码规范
    关闭键盘导致tableView:didSelectRowAtIndexPath:失效解决办法
  • 原文地址:https://www.cnblogs.com/lvjijun/p/10904733.html
Copyright © 2011-2022 走看看