Django 学生管理系统

1. 一对一班级模态增加编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .hide{
            display: none;
        }
        .shadow{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.4;
            z-index: 999;
        }
        .modal{
            z-index: 1000;
            position: fixed;
            left: 50%;
            top: 50%;
            height: 300px;
            width: 400px;
            background-color: white;
            margin-left: -200px;
            margin-top: -150px;
        }

        .del_class{
            z-index: 1001;
            position: fixed;
            left: 50%;
            top: 50%;
            height: 150px;
            width: 300px;
            background-color: white;
            margin-left: -150px;
            margin-top: -75px;
        }

        .edit_class{
            z-index: 1002;
            position: fixed;
            left: 50%;
            top: 50%;
            height: 150px;
            width: 300px;
            background-color: white;
            margin-left: -150px;
            margin-top: -75px;
        }
    </style>
</head>
<body>

    <h1>班级列表</h1>

    <div>
        <a onclick="showModal();">模态框增加</a>
    </div>

    <table border="1px">
        <thead>
            <tr>
                <td>ID</td>
                <td>班级名称</td>

                <td>模态操作</td>
            </tr>
        </thead>
        <tbody>
            {% for row in data %}
                <tr>
                    <td>{{ row.cid }}</td>
                    <td>{{ row.title }}</td>

                    <td>
                        <a onclick="modelEdit(this)">编辑</a>
                        <a onclick="DelClass({{ row.cid }})">删除</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    {#    遮罩#}
    <div id="shadow" class="shadow hide"></div>

    {#    增加#}
    <div id="addmodal" class="modal hide">
        <p>班级名称:
            <input id="addtitle" type="text" name="title" />
        </p>
        <input type="button" value="提交" onclick="AjaxSend();"  /><span id="errormsg"></span>
        <input type="button" value="取消" onclick="cancleModal();" />
    </div>

    {#    编辑#}
    <div id="editModal" class="modal hide">
        <h3>编辑</h3>
        <input id="editId" type="text" name="id" style="display: none">
        <p>班级名称<input id="editTitle" type="text" name="title" ></p>
        <input type="button" value="提交" onclick="editAjaxSend()"><span id="errormsg"></span>
        <input type="button" value="取消" onclick="cancleModal()">
    </div>


    <script src="/static/jquery-3.2.1.js"></script>

    <script>


        {#        增加#}
        function showModal() {
            $("#addmodal,#shadow").removeClass("hide");
        }

        function AjaxSend() {
            title=$("#addtitle").val();
            $.ajax({
                url: '/motai_add_class/',
                type: 'POST',
                data: {'title': title},
                success: function(arg){
                    arg = JSON.parse(arg);
                    if(arg.status){
                        location.reload();
                    }else{
                        alert(arg.message);
                    }
                }
            })
        }


        {#        编辑#}
        function modelEdit(self) {
            $("#editModal,#shadow").removeClass("hide");

            var title=$(self).parent().prevAll().eq(0).text();
            var id=$(self).parent().prevAll().eq(1).text();
            $("#editTitle").val(title);
            $("#editId").val(id);
        }

        function editAjaxSend() {
            id = $("#editId").val();
            title = $("#editTitle").val();
            $.ajax({
                url: '/modal_edit_class/',
                type: 'POST',
                data: {"id":id,"title": title},
                success: function(arg){
                    arg = JSON.parse(arg);
                    if(arg.status){
                        location.reload();
                    }else{
                        alert(arg.message);
                    }
                }
            })
        }


        {#        隐藏#}
        function cancleModal() {
            $("#shadow").addClass("hide");
            $("#addmodal").addClass("hide");
            $("#editModal").addClass("hide")
        }

    </script>


</body>
</html>

classes.html

def classes(request):
    data = sqlheper.get_list("select cid,title from class",[])
    return render(request, "classes.html", {"data": data})


def motai_add_class(request):
    ret = {'status': True, 'message': None}
    title = request.POST.get('title')
    try:
        nid = request.POST.get('nid')
        content = request.POST.get('content')
        sqlheper.motify_sql('insert into class(title) values(%s)',[title,])
    except Exception as e:
        ret['status'] = False
        ret['message'] = "处理异常"

    return HttpResponse(json.dumps(ret))

def modal_edit_class(request):
    print(request.POST)
    ret = {'status': True, 'message':None}
    try:
        id = request.POST.get('id')
        title = request.POST.get('title')
        sqlheper.motify_sql('update class set title=%s where cid=%s',[title,id,])
    except Exception as e:
        ret['status'] = False
        ret['message'] = "处理异常"

    return HttpResponse(json.dumps(ret))

views.py