jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的。但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的前端架构使用了BootStrap,表格本身的头部宽度是自适应的。
使用表头固定的代码如下:
//固定表头
$("#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表头固定问题
table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...
- HTML table表头固定
HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: <!DOCTYPE html> <html> <head> < ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- jQuery绑定和解绑点击事件及重复绑定解决办法
原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- 纯CSS实现table表头固定(自创备忘)
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
- jquery.min.map 404 (Not Found)出错的原因及解决办法
Chrome 更新后出现了 jquery.min.map 404 (Not Found) 的信息 这个到底是什么东西?查询了一下,得到了以下资料 JQuery 官方解释 摘录一下內容 从 jQuer ...
- Bootstrap Table表格一直加载(load)不了数据-解决办法
bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...
- jquery中动态新增的元素节点无法触发事件解决办法
在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...
随机推荐
- Service和Thread的关系
Service确实是运行在主线程里的,也就是说如果你在Service里编写了非常耗时的代码,程序必定有问题. Android的后台就是指,它的运行是完全不依赖UI的.即使Activity被销毁,或者程 ...
- python找寻合适的日志库logging Handler——Handler自定义实现
最近在用python tornado开发一个app的服务端.投产的系统肯定需要包含日志功能,这里就自然想到了用python自带的logging库. logging中日志内容的输出都交由Handle ...
- leetcode515
/** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...
- delphi IOS 简单类型转换
aUrl: NSString; cmdurl: NSURL; AbsoluteFileName: string; cmdurl := NSURL.URLWithString(aUrl); cmdurl ...
- mac os、linux及unix之间的关系
unix 是由贝尔实验室开发的多用户.多任务操作系统 linux是一类Unix操作系统的统称,严格来说,linux系统只有内核叫“linux”,而linux也只是表示其内核,但因为习惯使然,人们 习惯 ...
- U3D 代码自动化生成定制预置体的旋转问题
//定制预置体 //要求:1,模型面向U3D的Z轴正向(由MAX导出时是面向U3D的X负向的) //2,增加一些常用挂点,3增加一个圆形阴影片,4,添加包围盒 //根据这些要求制作预置休 static ...
- Redis常用类型数据操作
sortedset: 添加: zadd key score1 member1 score2 member2... zad mysort 90 laosong 100 zhangsan 获得:zsco ...
- win 10+ iis 10 部署.net core 1.1 web api
今天上午部署了wcf,部署了好久,一直没有部署好,最后找到了dudu的部署方法,结果中午吃饭的时候成功了,这是链接:http://www.cnblogs.com/dudu/p/3328066.html ...
- PHP中使用CURL模拟文件上传实例
调用实例: 该方法将本地的E盘文件test.doc上传到接口服务器上的 uploadFile方法中,uploadFile会对上传的文件做进一步处理. 若你想自己对上传的文件做操作,将接口uploadF ...
- MySQL数据库篇之单表查询
主要内容: 一.单表查询的语法 二.关键字的执行优先级 三.简单查询 四.where约束 五.分组查询 group by 六.having过滤 七.查询排序 order by 八.限制查询的记录数 l ...