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
        });
});

在JSP页面上使用Bootstrap模式

2 个答案: