zoukankan      html  css  js  c++  java
  • jQuery,Table表头固定插件chromatable存在的问题及解决办法

    在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的。但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的前端架构使用了BootStrap,表格本身的头部宽度是自适应的。

         使用表头固定的代码如下:

    复制代码
    1                      //固定表头
    2             $("#row1_table").chromatable({
    3                 width : "718px",
    4                 height : "335px",
    5                 scrolling : "yes"
    6             });
    复制代码
    复制代码
    1                    //固定表头2
    2             $("#row2_table").chromatable({
    3                 width : "718px",
    4                 height : "335px",
    5                 scrolling : "yes"
    6             });
    复制代码

          其中,第一个表格的表头可能会有较好的固定效果,但是如果第二个表格的表头的列宽度与第一个表格的表头列宽度有区别,那问题就会显示出来了:第二个表格的表头会乱掉----Oh,my god !会很难看。

          我观察了一下出现的问题,表头的列有的会挤到一起,我看了一下chromatable的源码,哦,好像该插件不能够在一个页面里适应两个不同table的 头宽度,于是我就采取了如下的解决办法,既然插件无法自己分配宽度那我来给它分配,于是问题解决了,一个页面中无论你用多少次chromatable,给 多少个table固定表头都会OK的,问题就是这么简单!O(∩_∩)O哈哈~

         另附chromatable的js源码如下(jquery.chromatable.js):

    复制代码
    /*
     * File:        chromatable.js
     * Version:     1.3.0
     * CVS:         $Id$
     * Description: Make a "sticky" header at the top of the table, so it stays put while the table scrolls
     * Author:      Zachary Siswick
     * Created:     Thursday 19 November 2009 8:53pm 
     * Language:    Javascript
     *
     */
    (function($){
        
        $.chromatable = {
            // Default options
            defaults: {
                            //specify a pixel dimension, auto, or 100%
                 "900px", 
                            height: "300px",
                            scrolling: "yes" 
            }
                    
            };
            
            $.fn.chromatable = function(options){
             
            // Extend default options
            var options = $.extend({}, $.chromatable.defaults, options);
    
            return this.each(function(){
                                                                
                    // Add jQuery methods to the element
                    var $this = $(this);
                    var $uniqueID = $(this).attr("ID") + ("wrapper");
                    
                    
                    //Add dimentsions from user or default parameters to the DOM elements
                    $(this).css('width', options.width).addClass("_scrolling");
                    
                    $(this).wrap('<div class="scrolling_outer"><div id="'+$uniqueID+'" class="scrolling_inner"></div></div>');
                                    
                    $(".scrolling_outer").css({'position':'relative'});
                    $("#"+$uniqueID).css(
                                                                        
                         {'border':'1px solid #CCCCCC',
                            'overflow-x':'hidden',
                            'overflow-y':'auto',
                            'padding-right':'17px'                        
                            });
                    
                    $("#"+$uniqueID).css('height', options.height);
                    $("#"+$uniqueID).css('width', options.width);
                    
                    // clone an exact copy of the scrolling table and add to DOM before the original table
                    // replace old class with new to differentiate between the two
                    $(this).before($(this).clone().attr("id", "").addClass("_thead").css(
                                                                                                                                                                                                 
                            {'width' : 'auto',
                             'display' : 'block', 
                             'position':'absolute', 
                             'border':'none', 
                             'border-bottom':'1px solid #CCC',
                             'top':'1px'
                                }));
        
                    
                    // remove all children within the cloned table after the thead element
                    $('._thead').children('tbody').remove();
                    
                    
                    $(this).each(function( $this ){
                                                                
                        // if the width is auto, we need to remove padding-right on scrolling container    
                        
                        if (options.width == "100%" || options.width == "auto") {
                            
                            $("#"+$uniqueID).css({'padding-right':'0px'});
                        }
                        
                    
                        if (options.scrolling == "no") {
                                                    
                            $("#"+$uniqueID).before('<a href="#" class="expander" style="100%;">Expand table</a>');
                            
                            $("#"+$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();
                            
                                        });
                                    });
    
    
                            //this is dependant on the jQuery resizable UI plugin
                            $("#"+$uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden");
        
                        }
                    
                    });
                    
                    
                    // Get a relative reference to the "sticky header"
                    $curr = $this.prev();
                    
                    // Copy the cell widths across from the original table
                    $("thead:eq(0)>tr th",this).each( function (i) {
                                                                                                 
                        $("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
                        
                    });
    
                    
                    //check to see if the width is set to auto, if not, we don't need to call the resizer function
                    if (options.width == "100%" || "auto"){
                        
                                                
                            // call the resizer function whenever the table width has been adjusted
                            $(window).resize(function(){
                                                                                
                                        resizer($this);                                        
                            });
                        }
                    });
                    
        };
            
            // private function to temporarily hide the header when the browser is resized
            
            function resizer($this) {
                    
                    // Need a relative reference to the "sticky header"
                    $curr = $this.prev();
                    
                    $("thead:eq(0)>tr th", $this).each( function (i) {
                                                                                                                             
                        $("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
                        
                    });
    
          };
            
    })(jQuery);
    复制代码
  • 相关阅读:
    单例模式
    Curator Zookeeper分布式锁
    LruCache算法原理及实现
    lombok 简化java代码注解
    Oracle客户端工具出现“Cannot access NLS data files or invalid environment specified”错误的解决办法
    解决mysql Table ‘xxx’ is marked as crashed and should be repaired的问题。
    Redis 3.0 Cluster集群配置
    分布式锁的三种实现方式
    maven发布项目到私服-snapshot快照库和release发布库的区别和作用及maven常用命令
    How to Use Convolutional Neural Networks for Time Series Classification
  • 原文地址:https://www.cnblogs.com/piuba/p/3413478.html
Copyright © 2011-2022 走看看