web开发:表头固定(利用jquery实现)
2012-11-08
0
表头固定应该是一个用得比较多的功能,参考了网上几个例子,在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格,在编码时多写一个固定的表头,对于动态生成的不知道多少列的表格就无从下手。而且例子中大多只能满足限定高度的情况,如果限定宽度,出现横向滚动条就无能为力了。
我的目的就是要像jquery-ui那样,找到页面上存在的表格,调用一个方法就可以实现固定表头的功能。趁着动手学习写jquery插件的机会,自己写了一个表头固定的插件。
使用方式和jquery-ui中的插件一样,只需要一行代码 $('#table1').fixHeader({height:100});下列浏览器测试通过
IE7 IE8 firefox16.0 chrome22.0
目前已知IE9下列不能对齐,手头暂时没有IE9来调试,以后再想法解决。
说明:
1 需要jquery,开发测试用的jquery-1.8.2,其他版本应该不大
2 表头部分的
需要写在里3 不限定宽度情况下,自动适应表格宽度(假设滚动条宽度为20px,实际宽度为表格宽度+20px)
4 支持多行表头固定
5 通常表格所有列都显示,无横向滚动条,只需要竖向滚动条的功能。该插件支持限定宽度条件下的表头固定。
6 限定宽度和高度的条件下固定表头显示时,表头固定功能无法单纯通过css来实现,需要通过js实现,会有轻微闪烁
7 已经考虑table和th,td的border-width设置成不同值的情况
8 已经考虑了表头中绑定的事件,原表头中绑定的事件仍然保留
特别注意:IE浏览器下,一定要设置表格中td和th的border-width,否则无法正确设置列宽,表头和数据部分会错位
/*! * fixHeader 1.0.0 * Copyright 2012 chokobo * * make table header fixed * * notice: set th,id border-width in IE * * tested browser: IE7 IE8 firefox16.0 chrome22.0 */(function( $, undefined ) {$.fn.fixHeader = function(options){ var defaults = { width: '', height: '' }; options = $.extend({}, defaults, options); var elem = this; if(options.height == ''){ return this; } var thead = elem.find('thead'); var fixTable = elem.clone().empty().removeAttr('id'); //set head default background-color if(fixTable.css('background-color') == 'transparent' || fixTable.css('background-color') == ''){ fixTable.css('background-color', '#fff'); } fixTable.css({ 'position': 'absolute', 'top': '0px', 'border-bottom': $('tr:eq(0)', thead).find('th:eq(0), td:eq(0)').css('border-bottom-width') }); $('tr:eq(0)', thead).find('th, td').each(function(){ var col = $(this); if($.browser.mozilla){ col.width(col.width()); } else if($.browser.chrome){ var colBorderWidth = parseInt(col.css('border-width')); col.width(col.width()+colBorderWidth); } else if($.browser.msie){ var colBorderWidth = parseInt(col.css('border-width')); if(colBorderWidth){ col.width(col.width()+colBorderWidth+colBorderWidth/2);//IE7?? } } }); //make head var dummyHead = thead.clone(); thead.appendTo(fixTable); dummyHead.prependTo(elem); var tbodyWrapper = elem.wrap('
0
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。