按鈕裏面的表格刪除一行元素

Question

我必須通過表格的刪除按鈕刪除數據庫元素。 在表中我展示了這些元素，當用戶點擊刪除按鈕時，我想顯示一個確認模式，然後調用Web服務來刪除元素。我使用的HTML，Thymeleaf，引導和JQuery 現在在我的表，我有：

<tr th:each="version : ${versions}"> 
    <td th:text="${version.name}"></td> 
    <td th:text="${version.releaseDate}"></td> 
    <td th:text="${version.Note}"></td> 
    <!-- Give me the size of the list. Each version has a lot of users store in a list named users --> 
    <td th:text="${#lists.size(version.users)}"></td> 
    <td th:if="${#lists.size(version.users)}==0"><button 
      type="button" class="btn btn-danger" id="deleteVersion" 
      data-toggle="modal" data-target="#deleteVersionModal" 
      data-toggle="tooltip">Delete</button></td> 
    <td th:if="${#lists.size(version.users)}!=0"><button 
      type="button" class="btn btn-danger" id="deleteVersion" 
      disabled>Delete</button></td> 
</tr> 

表中的每一個元素都有一個version.idClientVersion，這是在數據庫中的關鍵，所以我必須用這個值在我的web服務，但如何可以將它傳遞給我的模態，然後在JavaScript中我的ajax調用。

<div class="modal" id="deleteVersionModal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" 
        aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title">New version</h4> 
      </div> 
      <div class="modal-body"> 
       <!-- form start --> 
        <div class="box-body"> 
         Are you sure? The release version wiil be deleted permanently, you can't recover it. 
        </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default pull-left" 
        data-dismiss="modal">Close</button> 
       <button id="cancelVersionButton" type="button" class="btn btn-primary">Upload 
        version</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 

這是我的Ajax調用

$("#cancelVersionButton").click(
    function() { 
     //CSRF attribute for spring security 
     var token = $("meta[name='_csrf']").attr("content"); 
     var header = $("meta[name='_csrf_header']").attr("content"); 
     $('#deleteVersionModal').modal("hide");  
     jQuery.ajax({ 
      type : "DELETE", 
      url : "/"+, 
      beforeSend:function(xhr) { 
       xhr.setRequestHeader(header, token); 
       waitingModal.showPleaseWait(); 
      }, 
      success: function(data,status,xhr){ 
       //No exception occurred 
       if (data.status){ 
        //Also the field are right(for e.g. form value) 
        if(data.success){ 
         $('#versionsTable').load(document.URL + ' #versionsTable');       
         notifyMessage(data.result + " was deleted!", 'success'); 
        } 
        else{ 
         //code if there are some error into form for example 
        } 
       } else { 
        notifyMessage(data.result, 'error'); 
       } 
      }, 
      error: function(xhr,status,e){ 
       window.location.href = "/ATS/500"; 
      } 
     }).complete(function() { 
      //add timeout because otherwise user could see a too fast waiting modal 
      setTimeout(function(){ 
       waitingModal.hidePleaseWait(); 
      }, 1000); 
     });    
    }); 

Answer 1

這是很容易的實際。

第一步

這是每一行中的刪除按鈕

<a href="#" data-href="{id}" data-toggle="modal" data-target="#deleteVersionModal">Delete Record</a> 

的分貝數據HREF = 「（編號）」 的ID在這裏和分配ROWID調用deleteversionmodal

然後具有此功能，當模式顯示時將運行

$('#deleteVersionModal').on('show.bs.modal', function (e) { 
    $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href')); 
    $('#deleteVersionHiddenId').val($(this).find('.btn-ok').attr('href')); 
}); 

然後在deleteVersionModal

有這些這個隱藏字段，刪除按鈕

<input type="hidden" id="deleteVersionHiddenId" name="deleteVersionHiddenId" value="0" /> 
<a class="btn btn-danger btn-ok" id="deleteVersionHiddenbtn">Delete</a> 

然後在deleteVersionHiddenbtn點擊做到這一點

$('#deleteVersionHiddenbtn').click(function (e){ 
    e.preventDefault(); 
    var Id = $('#deleteVersionHiddenId').val(); 
    //delete here 
}); 

基本上正在發生的事情是行刪除按鈕調用模式，並具有ID在要刪除的db item id的data-href中，然後將該id分配給modal中的隱藏id，並且model中的按鈕使用該隱藏id刪除db中的實際記錄。

希望這有助於;）