使用bootstap做简单的后台管理框架有丰富插件可以使用,但是在使用bootstap-table插件时发现一个bug,当table需要展示的列比较多后,在使用了固定表头和锁定列后点击分页或排序功能时会出现表头和数据不能对其的问题。
具体情境如下
1、初次加载没有问题
2、然后移动下方的滚动条至右侧
3、滚动条在这个位置时,点击下边分页功能或者各列的排序功能时,会出现如下问题
表头又重新从起始位置加载了,而下方数据位置未改变,故而无法对齐。
分析问题
通过调试发现,在固定表头和锁定某些列后bootstrap-table插件会把表头单独移出自行与数据列对齐,网上有的解决方案是注释下边两行,但是这样会使冻结列和固定表头失效,无法两全其美。具体代码在bootstrap-table.js文件中,本人使用的版本是1.18.3
我顺着这思路继续看源码发现其实每次重新加载是这几行代码起作用,每次会把之前的表头去掉然后重新加载表头
发现问题解决就比较简单了,只需让代码每次在初始化的时候加载一次就可以,我增加了如下判断
修改后的代码如下
this.$tableHeader.css('margin-right', scrollWidth)
.find('table')
.css('width', this.$el.outerWidth())
.attr('class', this.$el.attr('class'));
//所解决问题是在数据列多时滚动条划到右侧点击排序或分页时数据与表头不对应
if(this.$tableHeader.find('table').children("thead").length<1){
this.$tableHeader.find('table').append(this.$header_);
}
还有另一处也需要增加判断
if(this.$tableHeader.find('table').children("thead").length<1){
this.$header_ = this.$header.clone(true, true);
this.$selectAll_ = this.$header_.find('[name="btSelectAll"]');
}
如此改法显得比较笨重,不是很优雅,目前只能算解决了这个问题,如果各位大神有其他更好的方式望能提出好意见。
如此改法在chrome浏览器中没有问题,但是在ie浏览器中会出现不对齐的情况,可以适量修改此处
希望能帮助大家,共同进步!