Question

我必须通过表的删除按钮删除数据库元素。在表格中我展示了这些元素，当用户点击删除按钮时，我想显示一个确认模式，然后调用一个Web服务来删除该元素。我正在使用HTML，Thymeleaf，Bootstrap和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，这是数据库中的键，所以我必须在我的webservice中使用这个值，但是如何将它传递给我的模态，然后传递给我在javascript中的ajax调用。 / p>

<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>

将db的rowid分配给data-href =＆＃34; {id}＆＃34;在这里id并调用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
});

基本上发生的事情是行删除按钮正在调用模态，并且要删除db项id的data-href中的id，然后将该id分配给modal中的隐藏id，并且模型中的按钮正在使用隐藏ID以删除db中的实际记录。

希望这会有所帮助;）

表内的按钮用于删除行元素

1 个答案: