在JSP页面上使用Bootstrap模式

Question

我有一个用户表，每行有Info,Edit和Delete按钮。

<tbody> 
    <c:choose> 
     <c:when test="${not empty customers}"> 
     <c:forEach items="${customers}" var="customer"> 
      <tr> 
       <td><c:out value="${customer.id}" /></td> 
       <td><c:out value="${customer.name}"/></td> 
       <td><c:out value="${customer.phoneNumber}"/></td> 
       <td><c:out value="${customer.email}"/></td> 
       <td style="text-align: center"> 
        <form:form action="/customerDetails"><input type="hidden" name="email" value="${customer.email}"/> 
         <button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-list-alt"></span></button> 
        </form:form> 
       </td> 
       <td style="text-align: center"> 
        <form:form action="/findCustomer"><input type="hidden" name="email" value="${customer.email}"/> 
         <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button> 
        </form:form> 
       </td> 
       <td style="text-align: center"> 
        <form:form action="/deleteCustomer"><input type="hidden" name="email" value="${customer.email}"/> 
         <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button> 
        </form:form> 
       </td> 
      </tr> 
     </c:forEach> 
     </c:when> 
     <c:otherwise> 
      <h2>There is no registered customers</h2> 
     </c:otherwise> 
    </c:choose> 
</tbody> 

当我点击删除按钮，该客户立即删除没有任何构象。我想使用Bootstrap模式进行确认是和否选项。你会看到每个Delete按钮都被<form:form action="/deleteCustomer"...>标记包围。有没有什么方法可以添加Bootstrap确认模式，同时保持这种结构，而不是在我的代码中添加任何Ajax调用？

Answer 1

不要使用你的方法，注意你在页面中创建如此多的表单时，并不是真的需要。我建议你使用AJAX删除元素并重新加载表格。主要的变化将是这样的：

<tbody> 
    <c:choose> 
     <c:when test="${not empty customers}"> 
     <c:forEach items="${customers}" var="customer"> 
      <tr> 
       <td><c:out value="${customer.id}" /></td> 
       <td><c:out value="${customer.name}"/></td> 
       <td><c:out value="${customer.phoneNumber}"/></td> 
       <td><c:out value="${customer.email}"/></td> 
       <td style="text-align: center"> 
         <button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-list-alt"></span></button> 
       </td> 
       <td style="text-align: center"> 
         <button class="btn btn-primary btn-xs" data-customer-id="${customer.id}"><span class="glyphicon glyphicon-pencil"></span></button> 
       </td> 
       <td style="text-align: center"> 
         <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button> 
       </td> 
      </tr> 
     </c:forEach> 
     </c:when> 
     <c:otherwise> 
      <h2>There is no registered customers</h2> 
     </c:otherwise> 
    </c:choose> 
</tbody> 

在您的JS文件

$('table .btn-warning').click(showInfo); 
$('table .btn-danger').click(removeRecord); 
... 

function removeRecord(){ 
    var customerId = $(this).data('customer-id'); 
    bootbox.confirm({ 
       message: "Sure to delete?", 
       callback: function(result) { 
        if (result) { 
         $.ajax({ 
          method: "POST", 
          url: getCtx() + "/yourRemoveURL", 
          success: function (jsonResponse) { 
           //your on success actions, maybe reload the table or remove the row 

          } 
         }); 
        } 
       } 
      }); 
} 

Answer 2

在你删除按钮添加一个id属性。

<td style="text-align: center"> 
        <form:form action="/deleteCustomer"><input type="hidden" name="email" value="${customer.email}"/> 
         <button id="deleteBtn" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button> 
        </form:form> 
       </td> 

加入您的页面上的javascript：

$('#deleteBtn').on('click', function(e){ 
    e.preventDefault(); 
    var $form=$(this).closest('form');  
    $('#confirm').modal({ backdrop: 'static', keyboard: false }) 
     .one('click', '#delete', function() { 
      $form.trigger('submit'); // submit the form 
     }); 
});