bootstrap 模态框中渲染bootstrap table表格并设置高度出现错位问题

By | 2020年6月1日

问题描述:

bootstraptable对于前段来说是个非常方便的表格列表插件,特别是数据的动态渲染及方便的分页配置等等;当我在模态框中渲染table表格时,给表格设置了一个高度,初始化表格,表格中没有数据,自然表格框就不会出现滚动条;如下面图片,就是我想要的效果:

没有出现滚动条的实例

然而它并没有出现我想要的效果,而是在没有数据的情况下也出现了滚动条:

出现滚动条实例

问题分析:

这个问题我找了很长时间,如果不在模态框中就不会出现这个问题,我也尝试着去查看了table的样式,发现样式的高度有问题,高度超出了我设置的table高度。

于是我就想,既然没在模态框下就没有这个问题,而在模态框中就有这个问题,是不是模态框的问题呢?

忽然我想到了一个问题,那就是我在模态框打开时就直接调用了bootstraptable的方法,是不是模态框打开方法还没有完全运行完成,table的方法就开始运行了,从而导致table的高度及样式出现了偏差,因为一开始模态框是影藏状态的。

解决方案:

既然问题找到了,那接下来就是解决方法了;解决方案就是在模态框完全打开后调用bootstraptable的方法,具体实现方法如下:

//在模态框打开后调用table初始化方法
$('#postNewActivityChooseGoods').on('shown.bs.modal', function () {
    initChooseActivityGoodsTbale();  //此方法是我封装的方法,并不是bootstraptable的方法,请自行写对应的代码方法
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注