Question

我很难为使用bootstrap-table（bootstrap v3.3）创建的表的删除事件实现确认模式。

这是表格的工具栏（注意删除按钮的模态规范）

<!--Button-->
<div id="toolbar" class="btn-group btn-default">
 <button class="btn btn-default" id="create">
   <i class="glyphicon glyphicon-file"></i> <span>New</span>
 </button>
 <button class="btn btn-default" id="show">
   <i class="glyphicon glyphicon-new-window"></i> <span>Show</span>
 </button>
 <button class="btn btn-default" id="edit">
   <i class="glyphicon glyphicon-edit"></i> <span>Edit</span>
 </button>
 <button class="btn btn-default" id="delete" data-toggle="modal" data-target="#confirmModal">
   <i class="glyphicon glyphicon-trash"></i> <span>Delete</span>
 </button>
</div>

这是表格

<!--Table-->
<div id="list">
  <table id="table" data-toggle="table" data-pagination="true" data-search="true
" data-show-refresh="true" data-show-columns="true" data-toolbar="#toolbar">
    <thead>
      <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="phn" data-sortable="true">Personal Health #</th>
        <th data-field="name" data-sortable="true">Full Name</th>
        <th data-field="preferred_name" data-sortable="true">Preferred Name</th>
        <th data-field="sex" data-sortable="true">Sex</th>
        <th data-field="date_of_birth" data-sortable="true">Date of Birth</th> 
      </tr>
    </thead>
  </table>
</div>

这两件作品是由同事写的，所以我不明白它是如何运作的。有一个链接到视图的table.js文件，它实现了工具栏的功能。

在table.js文件中，与删除相关的部分如下

$(function () {
  console.log( "Table loaded" );

  $('#table').bootstrapTable()
  .on('all.bs.table', function (e, name, args) {
    console.log('Event:', name, ', data:', args);
  }) 
   ...
   $('#delete').click(function () {
    var path = $(location).attr('pathname');
    var path = path + '/ajax';
    var token = {
      _token: $('#token').attr('value')
    };

我在视图中添加了以下内容

</div>
<!--Confirmation Modal-->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog aria-labell
edby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
     <div class="modal-content">
        <div class="modal-header">
        <h1>Are you sure?</h1>
        </div>
     <div class="modal-body">

     </div>
     <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cance
l</button>
        <a href="#" class="btn btn-danger danger">Delete</a>
     </div>
   </div>
  </div>
</div>

显然，这需要一些javascript告诉模式采取什么行动。然而，我发现的例子并不完全符合这种方法，我甚至不知道javascript还能猜到从哪里开始。

此时按工具栏上的删除删除选择并同时调用模态。因此，我认为只需要一个简单的{{pending action}}样式脚本来暂停“删除”操作，等待模态的结果。

任何人都可以澄清如何做到这一点？

由于 -James

问题bootstrap-table与确认模式

0 个答案: