jQuery,Table表头固定插件chromatable存在的问题及解决办法
2012-09-06 16:37
543 查看
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的。但是当我在一个页面中多次使用chromatable固定对个表格的表头时问题就出现了,首先说明系统的前端架构使用了BootStrap,表格本身的头部宽度是自适应的。
使用表头固定的代码如下:
其中,第一个表格的表头可能会有较好的固定效果,但是如果第二个表格的表头的列宽度与第一个表格的表头列宽度有区别,那问题就会显示出来了:第二个表格的表头会乱掉----Oh,my god !会很难看。
我观察了一下出现的问题,表头的列有的会挤到一起,我看了一下chromatable的源码,哦,好像该插件不能够在一个页面里适应两个不同table的头宽度,于是我就采取了如下的解决办法,既然插件无法自己分配宽度那我来给它分配,于是问题解决了,一个页面中无论你用多少次chromatable,给多少个table固定表头都会OK的,问题就是这么简单!O(∩_∩)O哈哈~
另附chromatable的js源码如下(jquery.chromatable.js):
使用表头固定的代码如下:
//固定表头 $("#row1_table").chromatable({ width : "718px", height : "335px", scrolling : "yes" });
//固定表头2 $("#row2_table").chromatable({ width : "718px", height : "335px", scrolling : "yes" });
其中,第一个表格的表头可能会有较好的固定效果,但是如果第二个表格的表头的列宽度与第一个表格的表头列宽度有区别,那问题就会显示出来了:第二个表格的表头会乱掉----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);
相关文章推荐
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
- TABLE 多表头固定问题(基本jquery插件)
- 关于jquery dialog被activeX插件遮挡问题的解决办法
- 网页表格表头固定并可以自由拉伸列头的问题解决 (完美方案_html_table_seo)
- jQuery 3.0中存在问题及解决办法
- IE6-IE9兼容性问题列表及解决办法_补充之六:锁表头的JQuery方案和非JQuery方案。(不支持IE6,7,8)
- jquery html5视频播放插件在iframe中无法全屏解决办法
- 小波图像分解与重构程序存在的问题与解决办法
- Atom 安装插件失败问题 (安装源被墙) | 解决办法
- 关于cocos2d实现H5声音播放存在问题的解决办法
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- 如何解决BootstrapTable中表头和内容不对齐问题
- 匹配优先存在的问题,以及解决办法
- jquery select2插件id为空导致服务端搜索不到内容问题的解决
- table 表头固定JScss样式 和jquery获取滚动条距离
- 98/2000/xp/2003局域网访问xp机器共享可能存在的问题和解决办法
- 小波图像分解与重构程序存在的问题与解决办法
- 类型“XXXXX”同时存在于XXX.dll和YYY.dll中的问题的解决办法
- jquery中checkbox反复没反应问题解决办法
- 使用Masonry动态设置tableview表头---tableHeaderView(解决表头背景色设置不了问题)