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));