bootstrap Table表头固定

• 简介

bootstrap Table的使用方法不多介绍，可参考官方说明文档，地址：http://bootstrap-table.wenzhixin.net.cn/documentation/

• 表头固定方法

1. 设置height属性值。这种方法有个弊端：因为table的height是固定了，当浏览器的高度小于table的高度时，table的部分数据显示不出来；这种还要去动态算table的高度
2. 用插件。插件名称是jquery.michiweber.table-head-fixed.js (源码见文章末尾)，原理：给bootstrap Table添加了一个thread和原来的thread内容一样，样式有差异，当没有滚动时显示旧的thread，当滚动后隐藏旧的thread，显示后添加的thread。插件使用方法如下：

• 引入样式：

 table.table-fixed-head .table-fixed-head-thead {
            border-bottom: 1px solid #dddddd;
            border-top: 1px solid #dddddd;
            background: #fff;
        }；

• 引入插件js(jquery.michiweber.table-head-fixed.js)；
• table标签加： class="table table-striped table-fixed-head" data-table-fixed-head-trigger="20" data-table-fixed-head-top="90";其中data-table-fixed-head-trigger指的是滚动高度大于这个值时隐藏旧的thread，显示后添加的thread；data-table-fixed-head-top指的是距离顶部的距离（这个值需要自己手动修改）；

• 问题

问题1：   当table为div的子元素，table没有设置高度（即100%），div有滚动条时，当你滚动时没有效果，看过jquery.michiweber.table-head-fixed.js这个源码你就明白：

div的滚动不会触发上面我截图中红色区域那块代码。

解决方案：自己给添加table的父元素div添加滚动事件（代码参考原来代码scroll函数）

问题2：表头和内容不对齐，个人建议两个简单方案：

1. 在 this.build函数设置css时候添加'border': 0（即没有边框，就不会有这种问题了）；
2. 自己添加滚动函数时候重新调用这两个函数（table.tfh('kill');    table.tfh(options);）让重新生成一下表头，注意：这两个方法运行的次数不要过于频繁，否则浏览器就崩掉了。                    

• 源码

(function($){
	$.fn.tfh = function(){

		var method = (arguments.length === 2) ? arguments[0] : ((arguments.length === 1 && typeof arguments[0] === 'string' ? arguments[0] : undefined));
		var options = $.extend({
			trigger: 0,
			top: 0
		},(arguments.length === 2) ? arguments[1] : ((arguments.length === 1 && typeof arguments[0] === 'object' ? arguments[0] : {} )));

		this.width = function(){
			return this.find('thead').attr('data-tmp-width',parseInt(this.find('thead').css('width'))).find('*').each(function(){
				$(this).attr('data-tmp-width',parseInt($(this).css('width')));
			}).end().end();
		};

		this.fix = function(){
			return this.find('.table-fixed-head-thead').css({
				'top': options.top + 'px',
				'position': 'fixed'
			}).end();
		};

		this.clone = function(){
			return this.find('thead').clone(true).prependTo(this).addClass('table-fixed-head-thead').end().end().removeAttr('data-tmp-width').find('*').removeAttr('data-tmp-width').end().end();
		};

		this.build = function(){
			return this.tfh('width').tfh('clone').find('[data-tmp-width]').each(function(){
				$(this).css({
					'width': $(this).data('tmp-width') + 'px',
					'minWidth': $(this).data('tmp-width') + 'px',
					'maxWidth': $(this).data('tmp-width') + 'px',
				});
			}).removeAttr('data-tmp-width').end().tfh('fix', options);
		};

		this.kill = function(){
			this.find('.table-fixed-head-thead').remove();
		};

		this.show = function(){
			return this.addClass('fixed').find('thead').css('visibility','visible').not('.table-fixed-head-thead').css('visibility','hidden').end().end();
		};

		this.hide = function(){
			return this.removeClass('fixed').find('thead').css('visibility','hidden').not('.table-fixed-head-thead').css('visibility','visible').end().end();
		};

		if(method !== undefined){
			return this[method].call($(this));
		} else {
			var table = this.build.call($(this),options);
			var tableWidth = table.css('width');
			var tableScrollLeft = table.position().left;

			if($(document).scrollTop() > options.trigger) {
				table.tfh('show');
			} else {
				table.tfh('hide');
			}

			var resizeTimer;
			$(window).resize(function(){
				window.clearInterval(resizeTimer);
				resizeTimer = window.setInterval(function() {
					window.clearInterval(resizeTimer);
					if(tableWidth !== table.css('width')) {
						tableWidth = table.css('width');
						table.tfh('kill');
						table.tfh(options);
					}
				}, 1000);
			}).scroll(function(){
				if($(document).scrollTop() > options.trigger) {
					table.tfh('show');
					table.find('.table-fixed-head-thead').css('left',(tableScrollLeft - $(document).scrollLeft()) + 'px');
				} else {
					table.tfh('hide');
				}
			});
		}
	}
	$(document).ready(function(){
		$('table.table-fixed-head').each(function(){
			$(this).tfh({
				trigger: ($(this).data('table-fixed-head-trigger') !== undefined ? $(this).data('table-fixed-head-trigger') : 0),
				top: ($(this).data('table-fixed-head-top') !== undefined ? $(this).data('table-fixed-head-top') : $(this).position().top)
			});
		});
	});
}(jQuery));