如何在bootstrap模态框中插入bootstraptable表格打开时表格不变形不失真

By | 2020年6月18日

之前看到很多网友在问如何在模态框中插入bootstraptable表格,其实这个很简单,直接将table标签写在模态框body内,正常初始化就可以了;但有一点需要注意的,那就是一般情况下模态框初始是隐藏状态的,在模态框未打开之前table就已经初始化完成了;而在隐藏的模态框下table的部分样式可能不生效,例如表格的指定高度height在此时就不是你想要的结果,那这应该如何处理呢?

1、首先给大家介绍如何在模态框中嵌入bootstraptable表格:

<!-- 模态框(Modal) 查看已添加活动列表-->
<div class="modal fade" id="viewAddedActivityGoodsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="viewAddedActivityGoodsModalLabel">查看已添加活动列表</h4>
            </div>
            <div class="modal-body">
                <p class="help-block" style="color: red;">如果折扣和一口价同时设定了,则只显示折扣!</p>
                <div id="toolbarviewAddedActivityGoods" class="form-inline">
                    <div class="btn-group" id="clear_act_goods" data-actobj="">
                        <button type="button" id="clear_act_goods_bnt" class="btn btn-danger">
                            清空活动商品
                        </button>
                    </div>
                </div>
                <!--这里直接在模态框中添加需要渲染的表格标签就行了-->
                <table id="viewAddedActivityGoodsTable" class="table table-hover"></table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

接下来就是js代码初始化表格数据就行了,至于如何初始化渲染表格数据,请至之前的文章页面查看:bootstraptable服务端数据渲染以及分页实现

2、上面介绍的是在模态框中显示表格,接下来就开始介绍如何让模态框中的表格在打开模态框后显示的样式没有问题:

其实这里的处理方式就是在模态框打开后才初始化表格渲染数据,具体实现方法如下:

$('#postNewActivityChooseGoods').on('shown.bs.modal', function () {
    	initChooseActivityGoodsTbale();  //这个是初始化表格的方法,具体根据您自己的需求去实现这个方法
});

上面的就是监听模态框是否打开了,如果打开了就初始化表格数据。

至此整个模态框中添加表格数据的方法就介绍完成了,包括可能遇到的样式问题也一并解决了;如果您还发现了其他问题的话,请在下方留言,大家一起讨论解决问题。

发表评论

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