- 简介
bootstrap Table的使用方法不多介绍,可参考官方说明文档,地址:http://bootstrap-table.wenzhixin.net.cn/documentation/
- 表头固定方法
- 设置height属性值。这种方法有个弊端:因为table的height是固定了,当浏览器的高度小于table的高度时,table的部分数据显示不出来;这种还要去动态算table的高度
- 用插件。插件名称是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:表头和内容不对齐,个人建议两个简单方案:
- 在 this.build函数设置css时候添加'border': 0(即没有边框,就不会有这种问题了);
- 自己添加滚动函数时候重新调用这两个函数(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));