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% 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( {'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="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);
