Subversion Repositories Applications.referentiel

/*
 * 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%
                width: "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({'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':'0'
                                                        }));
        
                                
                                // 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="width: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);