Question

我想使用我添加到 Bootstrap Table 的操作按钮触发的 Bootstrap模式，但我无法理解。有没有办法将这些按钮的数据属性绑定到模态？在这种情况下，它不起作用。或者万一我只能通过javascript完成，我怎么能这样做，因为它在我的情况下都不起作用。无论如何都没有错误。

这是一个屏幕截图，用于清楚我正在谈论的按钮：每行的编辑和删除按钮。

我正在使用的代码：

// Click handler for the edit button when I try the data attributes way
function operateFormatter(value, row, index) {
    return [
        '<a class="edit ml10" href="#dialogo-destinos" data-toggle="modal"  title="Edit">',
            '<i class="glyphicon glyphicon-edit"></i>',
        '</a>',
        '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
        '</a>'
    ].join('');
}
// Code for the javascript way:
window.operateEventsDestinos = {
    'click .edit': function (e, value, row, index) { 
        var $dialogo = $('.dialogo.destinos');
        ... // actions to populate the modal according to the row data
        $dialogo.modal('show');
        ...
    },
    'click .remove': function (e, value, row, index) {
        ...
    }
};

Bootstrap Table呈现的表：

<div class="row">
    <div class="col-md-12">
        <table id="tabla-datos-destinos" class="bootstrap-table table table-striped table-hover"
                data-pagination="true" data-search="true" data-show-header="true"
                data-show-columns="true" data-show-refresh="true" data-toolbar="#custom-toolbar"
                data-show-toggle="true" data-show-export="true">
           <thead>
                <tr>
                    <th data-field="nombre" data-sortable="true">Nombre</th>
                    <th data-field="poblacion" data-sortable="true">Localidad</th>
                    <th data-field="provincia" data-sortable="true">Provincia</th>
                    <th data-field="operate" data-formatter="operateFormatter" data-events="operateEventsDestinos">Acciones</th>
                </tr>
           </thead>
        </table>
    </div>
</div>

当然还有模态的HTML：

<div class="dialogo destinos modal fade" id="dialogo-destinos">
...
</div>

任何想法为什么这不起作用或我该怎么办？

修改

我也尝试过使用按钮代替A标签，但我也无法使用它。它改为运行默认行为：提交表单。有没有办法直接在表格的HTML中添加动作按钮，而不必通过javascript添加它们，我认为这是没有完成绑定的原因？

Answer 1

您只需将data-toggle和data-target绑定到acciones div内的按钮即可。

例如：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#dialogo-destinos">
  Launch Modal
</button>

如何将Bootstrap模式绑定到使用Bootstrap表

1 个答案: