JS如何使用Bootstrap Table的冻结列功能彻底解决高度问题

爱秀

作者

这篇文章主要为大家展示了“JS如何使用Bootstrap Table的冻结列功能彻底解决高度问题”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何使用Bootstrap Table的冻结列功能彻底解决高度问题”这篇文章吧。

一、问题追踪

记得在之前的那篇里面介绍过，bootstrapTable组件自带的冻结列扩展，不能兼容ie浏览器，即使最新版本的ie也会无法使用，这是一般的系统不能忍受的，所以在那篇里面给出过解决方案，但并未分析ie浏览器不能兼容的原因，昨天博主花了点时间特意调试了下源码，原来在ie里面，使用jquery的clone()方法和谷歌等浏览器有所区别。为了展示这个区别，这里先抛个砖。比如有如下代码：


aaabbbccc
dddeeefff
ggghhhiii


var$tr=$('#tbtesttr:eq(0)').clone();
var$tds=$tr.find('td');
$tr.html('');
alert($tds.eq(0).html());

代码本身很简单，只是为了测试用。看到这里你可以试着猜一下alert的结果。

算了，不考大家了，直接贴出来吧，有图有真相！

相信不用我过多的解释哪个是ie，哪个是谷歌了吧。

两者的区别很明显，谷歌里面得到“aaa”，而ie里面得到空字符串。这是为什么呢？

其实如果你用值类型和引用类型的区别来解释这个差别你就不难理解了，在谷歌浏览器里面，$tr变量是一个引用类型，当你清空了它里面的内容，只是清除了$tr这个变量的“指针”，或者叫指向，$tds变量仍然指向了$tr的原始内容，所以调用$tds.eq(0).html()的时候仍然能得到结果aaa；同样的代码在ie浏览器里面，$tr变量就是一个值类型，你清空了它里面的内容之后，$tds的内容也被清空了。如果你有更好的解释，欢迎赐教哈。

之所以组件原生的js不能兼容ie浏览器，就是因为它使用了clone()这个方法，导致在不同的浏览器看到不同的结果。相信bootstrapTable组件的作者应该是知道这个区别的，只不过没有太在意这些，从作者做的很多功能的兼容性能够看出，他做的功能很多没有太多的考虑ie浏览器的效果。

二、效果预览

还是老规矩，说了这个多，没图怎么行，小二，上图！

没有固定高度的情况：单列冻结。

多列冻结。

固定任意高度效果

ie浏览器也没有问题，这里就不再重复上图了。

三、源码解析

源码没啥说的，有兴趣可以自己看看，主要的原理还是重写bootstrapTable构造器的事件，来达到想要的效果。

(function($){
'usestrict';
$.extend($.fn.bootstrapTable.defaults,{
fixedColumns:false,
fixedNumber:1
});
varBootstrapTable=$.fn.bootstrapTable.Constructor,
_initHeader=BootstrapTable.prototype.initHeader,
_initBody=BootstrapTable.prototype.initBody,
_resetView=BootstrapTable.prototype.resetView;
BootstrapTable.prototype.initFixedColumns=function(){
this.$fixedHeader=$([
'',
'',
'',
'',
'

'].join('')); this.timeoutHeaderColumns_=0; this.$fixedHeader.find('table').attr('class',this.$el.attr('class')); this.$fixedHeaderColumns=this.$fixedHeader.find('thead'); this.$tableHeader.before(this.$fixedHeader); this.$fixedBody=$([ '', '', '', '

', '

'].join('')); this.timeoutBodyColumns_=0; this.$fixedBody.find('table').attr('class',this.$el.attr('class')); this.$fixedBodyColumns=this.$fixedBody.find('tbody'); this.$tableBody.before(this.$fixedBody); }; BootstrapTable.prototype.initHeader=function(){ _initHeader.apply(this,Array.prototype.slice.apply(arguments)); if(!this.options.fixedColumns){ return; } this.initFixedColumns(); varthat=this,$trs=this.$header.find('tr').clone(); $trs.each(function(){ $(this).find('th:gt('+(that.options.fixedNumber-1)+')').remove(); }); this.$fixedHeaderColumns.html('').append($trs); }; BootstrapTable.prototype.initBody=function(){ _initBody.apply(this,Array.prototype.slice.apply(arguments)); if(!this.options.fixedColumns){ return; } varthat=this, rowspan=0; this.$fixedBodyColumns.html(''); this.$body.find('>tr[data-index]').each(function(){ var$tr=$(this).clone(), $tds=$tr.find('td'); //$tr.html('');这样存在一个兼容性问题，在IE浏览器里面，清空tr,$tds的值也会被清空。 //$tr.html(''); var$newtr=$(''); $newtr.attr('data-index',$tr.attr('data-index')); $newtr.attr('data-uniqueid',$tr.attr('data-uniqueid')); varend=that.options.fixedNumber; if(rowspan>0){ --end; --rowspan; } for(vari=0;i*').each(function(i){ var$this=$(this), index=i; if(i>=that.options.fixedNumber){ returnfalse; } if(that.options.detailView&&!that.options.cardView){ index=i-1; } that.$fixedHeader.find('th[data-field="'+visibleFields[index]+'"]') .find('.fht-cell').width($this.innerWidth()); headerWidth+=$this.outerWidth(); }); this.$fixedHeader.width(headerWidth).show(); }; BootstrapTable.prototype.fitBodyColumns=function(){ varthat=this, top=-(parseInt(this.$el.css('margin-top'))), //thefixedheightshouldreducethescorll-xheight height=this.$tableBody.height()-18; debugger; if(!this.$body.find('>tr[data-index]').length){ this.$fixedBody.hide(); return; } if(!this.options.height){ top=this.$fixedHeader.height()-1; height=height-top; } this.$fixedBody.css({ width:this.$fixedHeader.width(), height:height, top:top+1 }).show(); this.$body.find('>tr').each(function(i){ that.$fixedBody.find('tr:eq('+i+')').height($(this).height()-0.5); varthattds=this; debugger; that.$fixedBody.find('tr:eq('+i+')').find('td').each(function(j){ $(this).width($($(thattds).find('td')[j]).width()+1); }); }); //events this.$tableBody.on('scroll',function(){ that.$fixedBody.find('table').css('top',-$(this).scrollTop()); }); this.$body.find('>tr[data-index]').off('hover').hover(function(){ varindex=$(this).data('index'); that.$fixedBody.find('tr[data-index="'+index+'"]').addClass('hover'); },function(){ varindex=$(this).data('index'); that.$fixedBody.find('tr[data-index="'+index+'"]').removeClass('hover'); }); this.$fixedBody.find('tr[data-index]').off('hover').hover(function(){ varindex=$(this).data('index'); that.$body.find('tr[data-index="'+index+'"]').addClass('hover'); },function(){ varindex=$(this).data('index'); that.$body.find('>tr[data-index="'+index+'"]').removeClass('hover'); }); }; })(jQuery);

.fixed-table-header-columns,
.fixed-table-body-columns{
position:absolute;
background-color:#fff;
display:none;
box-sizing:border-box;
overflow:hidden;
}
.fixed-table-header-columns.table,
.fixed-table-body-columns.table{
border-right:1pxsolid#ddd;
}
.fixed-table-header-columns.table.table-no-bordered,
.fixed-table-body-columns.table.table-no-bordered{
border-right:1pxsolidtransparent;
}
.fixed-table-body-columnstable{
position:absolute;
animation:none;
}
.bootstrap-table.table-hover>tbody>tr.hover>td{
background-color:#f5f5f5;
}

如何使用呢？这里博主单独搞了一个静态的html测试页，还是贴出来供大家参考。
















新增

× 操作

姓名

年龄

this.$body.find('>tr[data-index]').each(function(){ var$tr=$(this).clone(), $tds=$tr.find('td'); //$tr.html('');这样存在一个兼容性问题，在IE浏览器里面，清空tr,$tds的值也会被清空。 //$tr.html(''); var$newtr=$(''); $newtr.attr('data-index',$tr.attr('data-index')); $newtr.attr('data-uniqueid',$tr.attr('data-uniqueid')); varend=that.options.fixedNumber; if(rowspan>0){ --end; --rowspan; } for(vari=0;i

这一段做了部分修改，有兴趣可以调适细看。

3、项目中的使用

最近在研究学习abp的相关源码，将bootstrapTable融入abp里面去了，贴出表格冻结的一些效果图。

4、扩展

除此之外，还特意做了右边操作列的冻结。

和左边列的冻结一样，最右边列的冻结也是可以做的，最不同的地方莫过于右边列有一些操作按钮，如果在点击冻结列上面的按钮时触发实际表格的按钮事件是难点。如果有这个需求，可以看看。

bootstrap-table-fixed-columns.js
bootstrap-table-fixed-columns.css

需要说明的是，由于时间问题，右侧固定列的代码和上述解决高度的代码并未合并，所以如果你既想要解决冻结列的高度，又想要右侧列的冻结，需要自己花点时间合并下代码。

以上是“JS如何使用Bootstrap Table的冻结列功能彻底解决高度问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！

阅读全文

发布于 2021-07-09 21:17:34

分享空间
分享微博
手机扫一扫

海报

175

上一篇：JS如何给按钮添加跳转功能类似a标签下一篇：vue-cli项目中怎么配置反向代理

推荐阅读