bootstrap中的Handsontable模型popover无法加载All列,为什么?

时间:2016-11-20 11:43:26

标签: javascript jquery twitter-bootstrap

我使用Handsontable jquery插件进行项目,其中用户点击按钮和弹出窗口来输入数据。我使用bootstrap模型进行popover。

这是我的HTML

<li data-toggle="modal" data-target="#myModal">
  <i class="fa fa-table"></i>
</li>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content ">
      <div class="modal-header text-left">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title text-center" id="myModalLabel">Hotlist</h4>
      </div>
      <div class="modal-body">  

       <div id="hotlist"></div>

        <div class="upload-form-hotlist">
            <form action="">
                <input type="file">
            </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这是我的js

$(document).ready(function() {
    // Handsontable

    $("#hotlist").handsontable({
        startRows: 5,
        startCols: 5,
        minRows: 5,
        minCols: 5,
        maxRows: 100,
        maxCols: 100,
        rowHeaders: true,
        colHeaders: true,
        minSpareRows: 1,
        contextMenu: true
    });

    // This way, you can access Handsontable api methods by passing their names as an argument, e.g.:
    var hotInstance = $("#hotlist").handsontable('getInstance');

});

现在发生什么快照

Now what happen snapshot

但是我点击表格中的任何地方我得到了我想要的但是为什么需要点击表格。请帮帮我。

我期待的图片

What i expected picture

1 个答案:

答案 0 :(得分:0)

我试着找到答案。

$(document).ready(function() {

// Handsontable

$('#myModal').on('hidden.bs.modal', function (e) {

    $("#hotlist").handsontable({
        startRows: 5,
        startCols: 5,
        minRows: 5,
        minCols: 5,
        maxRows: 100,
        maxCols: 100,
        rowHeaders: true,
        colHeaders: true,
        minSpareRows: 1,
        contextMenu: true
    });

    // This way, you can access Handsontable api methods by passing their names as an argument, e.g.:
    var hotInstance = $("#hotlist").handsontable('getInstance');
});

});