django - jaxa 表单提交 | 表单编辑 | 分页功能 | 表单数据删除 完整版

1. html 

{% extends 'layout.html' %}

{% block content %}

    <div class="container">

     <!-- Button trigger modal -->
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
     新建表单基于bootsrap 内置代码显示
    </button>
    <hr/>

     <button type="button" class="btn btn-success" id="btnadd"> 新建表单基于js显示 </button>
    <hr/>

    <div class="panel panel-default">
            <div class="panel-heading">  <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 表单列表</div>
            <table class="table table-bordered">
              <thead>
                <tr>
                    <th>ID</th>
                    <th>订单号</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>状态</th>
                    <th>用户</th>
                    <th>操作</th>
                </tr>
              </thead>
              <tbody>

              {% for item in queryset %}
                <tr>
                    <th scope="row">{{ item.id }}</th>
                    <td>{{ item.oid }}</td>
                    <td>{{ item.title }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.get_status_display }}</td>
                    <td>{{ item.user.user }}</td>

                    <td>
                      <a uid='{{ item.id }}' class="btn btn-primary btn-xs btn-edit">编辑</a>
                      <a uid='{{ item.id }}' class="btn btn-danger btn-xs btn-delete">删除</a>
                    </td>
                </tr>
              {% endfor %}
              </tbody>
            </table>






        </div>

       <ul class="pagination">
            {{ page_string }}
         </ul>


     <!-- 新建表单 |  编辑表单 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <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" id="myModalLabel">  新建 </h4>
          </div>
          <div class="modal-body">

               <form method="post" id="saveform" novalidate>

                    {% for field in form %}
                        <div class="form-group">
                            <label for="exampleInputEmail1"> {{ field.label }}</label>
                             {{ field }}
                            <span style="color:red" class="error-msg">  </span>
                      </div>
                    {% endfor %}


                </form>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
            <button type="button" class="btn btn-primary" id="btnSave"> 提 交 </button>
          </div>
        </div>
      </div>
    </div>


    <!-- 删除对话框 -->
    <div class="modal fade" id="DaleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content alert-danger">
          <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" id="myModalLabel">删除</h4>
          </div>
          <div class="modal-body">
            你确定要删除消息吗?
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
            <button id='quedingdeleteid' type="button" class="btn btn-danger">删 除</button>
          </div>
        </div>
      </div>
    </div>


</div>

{% endblock %}

{% block js %}
    <script type="text/javascript">
        // 删除信息专用
        var DELETE_ID;
        var EDIT_ID;

        $(function (){
            // 显示保存信息得表单
            bindBntaddEvent();
            // 保存信息
            bindBntbtnSaveEvent();

            // 获取要删除信息得id
            bindBntbtnDeleteEvent();

            // 确定删除信息
            bindBntbtnquedingDeleteEvent();

            // 编辑事件
            bindBntbtneditDeleteEvent();



        })

        // 显示保存信息得表单
        function bindBntaddEvent(){
            $('#btnadd').click(function () {

                // 添加信息时讲 EDIT_ID 置空
                EDIT_ID = undefined

                // 添加时 清空之前的值
                $('#saveform')[0].reset();

                // 测试设置标题 $('#myModalLabel').text('新建');
                $('#myModalLabel').text('新建');
                //点击展示页面 显示对话框
                $('#myModal').modal('show');
            })
        }

        // 保存信息
        function bindBntbtnSaveEvent(){
            $('#btnSave').click(function () {
                // 清楚所有错误信息
                $('.error-msg').empty()

                if(EDIT_ID){
                    // 编辑
                    doEdit();
                }else{
                    // 添加
                    doAdd();
                }
            });
        }

        function doEdit() {
            $.ajax({
                url: '/order/bianji/' + '?uid=' + EDIT_ID,
                type: 'post',
                data:$('#saveform').serialize(),
                dataType:'JSON',
                success:function (res){
                    if(res.status){
                        alert('编辑成功');
                        location.reload();
                    }else{
                        if(res.tips){
                            alert(res.tips);
                        }else{
                            $.each(res.error, function (name, errorList) {
                            $('#id_' + name).next().text(errorList[0])
                        })
                        }
                    }
                }
            })
        }

        function doAdd() {

            $.ajax({
                    url: '/order/add/',
                    type: 'post',
                    data:$('#saveform').serialize(),
                    dataType:'JSON',
                    success:function (res){
                        if(res.status){
                            alert('创建成功');
                            // 刷新 清除表单数据 表单弹出状态
                            // 方法一 $('#saveform') 是一个JQ 对象(没有reset()方法), -> $('#saveform')[0]变成 DOM对象 可以使用reset()方法
                            //$('#saveform')[0].reset();
                            // 执行关闭表单
                            // $('#saveform').modal('hide')
                            // 方法二 直接刷新 表单消失
                            location.reload();
                        }else{
                            $.each(res.error, function (name, errorList) {
                                $('#id_' + name).next().text(errorList[0])
                            })
                        }
                    }
                })

        }

        // 获取要删除信息得id
        function bindBntbtnDeleteEvent(){
            $('.btn-delete').click(function () {
                // 显示删除对话框
                // alert('点击删除')
                $('#DaleteModal').modal('show')

                // 获取当前值得id (要删除数据得id)
                DELETE_ID = $(this).attr('uid')

            })
        }

        // 确定删除信息
        function bindBntbtnquedingDeleteEvent() {
            $('#quedingdeleteid').click(function () {
                // 确认删除 id 发送后台
                $.ajax({
                    url: '/order/delete/',  // ==> /order/delete/?uid=3
                    type: 'get',
                    data:{ // 传递参数过去
                        uid:DELETE_ID,
                    },
                    dataType:'JSON',
                    success:function (res) {
                        if (res.status){
                            location.reload();
                        }else{
                           // 删除失败
                           alert(res.error);
                        }
                    }
                })
            })
        }

        // 编辑事件
        function bindBntbtneditDeleteEvent() {
           $('.btn-edit').click(function () {
                // 编辑时 清空之前的值
                $('#saveform')[0].reset();
               // 设置uid
                var uid = $(this).attr('uid');

                EDIT_ID = uid;

                // ajax获取当前行的数据
                $.ajax({
                    url: '/order/edit/',  // ==> /order/edit/?uid=3
                    type: 'get',
                    data: {
                        uid: uid
                    },
                    dataType:'JSON',
                    success: function (res) {
                        if (res.status) {
                            //  获取到数据
                            {#console.log(res.data);#}
                            $.each(res.data, function (name, value) {   // 遍历data里面的数据 赋值给name value
                                $('#id_' + name).val(value)  // 讲value 值  赋值给 #id_name
                            })
                            // 测试设置标题 $('#myModalLabel').text('新建');
                            $('#myModalLabel').text('编辑');
                            //点击展示页面 显示对话框
                            $('#myModal').modal('show');
                        }else {
                            alert(res.error);
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}

 

2. views  试图 代码 

from django.shortcuts import render,redirect

# 随机事件组合 时间 + 字符串
import random
from datetime import datetime

# 免除认证 发送消息
from django.views.decorators.csrf import csrf_exempt

# 返回json
from django.http import JsonResponse


from app import models
from app.utils.bootsrap import BootstrapModelForm

# 引入分页代码
from app.utils.pagetions import Pagetions


class OrderModelForm(BootstrapModelForm):
    class Meta:
        model = models.Order
        #fields = '__all__'
        exclude = ['oid', 'user']

'''表单列表'''
def order_list(request):
    queryset = models.Order.objects.all().order_by('-id')

    page_object = Pagetions(request, queryset)


    form = OrderModelForm()

    # 分页
    page_object = Pagetions(request, queryset)

    context = {
        'form': form,
        'queryset': page_object.page_queryset,
        'page_string': page_object.html()
    }


    return render(request, 'order.html', context)


''' 表单 添加数据 ajax 请求 '''
@csrf_exempt
def order_add(request):
    form = OrderModelForm(data=request.POST)
    if form.is_valid():

        # 字段中少一个订单号, 需要动态生成一个 手动设置订单号
        form.instance.oid = datetime.now().strftime('%Y%m%d%H%M%S') + str(random.randint(10000, 99999))
        # 自动 默认 选择当前用户为 用户名
        form.instance.user_id = request.session['info']['id']

        # 验证成功
        form.save()
        return JsonResponse({'status': True})
    # 验证失败
    return JsonResponse({'status': False, 'error': form.errors})



''' 删除订单'''
def order_delete(request):
    uid = request.GET.get('uid')
    # 判断数据是否存在
    exists = models.Order.objects.filter(id=uid).exists()
    if not exists:
        return JsonResponse({'status': False, 'error': '数据不存在,删除失败'})
    models.Order.objects.filter(id=uid).delete()
    return JsonResponse({'status': True})

# 获取编辑数据里面的数据
def order_edit(request):
    uid = request.GET.get('uid')

    # values 直接出字典结果
    row_dict = models.Order.objects.filter(id=uid).values('title', 'price', 'status').first()
    if not row_dict:
        return JsonResponse({'status': False, 'error': '数据不存在'})

    # 自己构建字典让数据传输到前端 | 或者直接查询字典
    result = {
        'status': True,
        'data': row_dict
    }
    return JsonResponse(result)

# 编辑存包数据
@csrf_exempt
def order_bianji(request):
    uid = request.GET.get('uid')

    row_obj = models.Order.objects.filter(id=uid).first()

    if not row_obj:
        return JsonResponse({'status': False, 'tips': '数据不存在'})

    form = OrderModelForm(data=request.POST, instance=row_obj)
    if form.is_valid():
        form.save()
        return JsonResponse({'status': True})

    return JsonResponse({'status': False, 'error': form.errors})

 

urls 

    # 订单
    path('order/list/', order.order_list, name='order'),
    path('order/add/', order.order_add, name='/order/add/'),
    path('order/delete/', order.order_delete, name='/order/delete/'),
    path('order/edit/', order.order_edit, name='/order/edit/'),
    path('order/bianji/', order.order_bianji, name='/order/bianji/'),

 

效果