modal 删除

模态框部分

<!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <h4>警告</h4>
                <p>确定要删除吗</p>
                <p>
                    <button type="button" class="btn btn-danger" id="delConfirmBtn">确定</button>
                    <button type="button" class="btn btn-default" id="delCancelBtn">取消</button>
                </p>
            </div>
        </div>
    </div>

前端表格

<table class="table table-hover table-bordered">
        <tr>
            <th>序号</th>
            <th>数量</th>
            <th>价格</th>
        </tr>
        {% for one in queryset %}
            <tr one-id="{{ one.id }}">
                <td>{{ one.id }}</td>
                <td>{{ one.count }}</td>
                <td>{{ one.price }}</td>
                <td>
                    <a oneid="{{ one.id }}" href="#" class="btn btn-danger btn-sm delBtn">删除</a>
                </td>
            </tr>
        {% endfor %}
    </table>

JS部分

<script>
        let OneID;
        $(function () {
            bindDelBtnEvent();
        })

        function bindDelBtnEvent() {
            $(".delBtn").click(function () {
                $('#myModal').modal('show');
                OneID = $(this).attr('oneid');
            });
            $("#delCancelBtn").click(function () {
                $('#myModal').modal('hide');
            });
            $("#delConfirmBtn").click(function () {
                $.ajax({
                    url: "{% url 'price_policy_del' %}",
                    type: 'GET',
                    data: {oneId: OneID},
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.success) {
                            alert(res.msg);
                            $("tr[one-id='" + OneID + "']").remove()
                            $('#myModal').modal('hide');
                        } else {
                            alert(res.msg);
                            $('#myModal').modal('hide');
                        }
                    }
                })
            });
        }
    </script>

后端逻辑

from utils.resCode import ResCode
def price_policy_del(request):
    if request.method == 'GET':
        pk = request.GET.get('oneId')
        price_policy = models.PricePolicy.objects.filter(id=pk)
        price_policy.delete()
        res_code = ResCode()
        res_code.success = True
        res_code.msg = '删除成功'
        return JsonResponse(res_code.dict)