温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

django modal + bootstrap

发布时间:2020-07-04 21:21:38 来源:网络 阅读:3510 作者:hqtmit 栏目:开发技术

django modal + bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7/css/bootstrap.css">
    <style>
        .mypadding {
            padding: 15px 0px 0px;
        }

    </style>

</head>
<body>

<div class="container">
    {#    <div class="row"></div>#}
    <div class="row mypadding">
        <div class="col-lg-1">
            <a class="btn btn-primary" id="addStudent">添加</a>
        </div>
    </div>

    <div class="row mypadding">
        <div class="col-lg-5">
            <table class="table table-bordered mypad">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>性别</th>
                </tr>
                </thead>

                {% for student in student_list %}
                    <tr>
                        <td>{{ student.id }}</td>
                        <td>{{ student.name }}</td>
                        <td>{{ student.age }}</td>
                        <td>{% if student.gender %}
                            男
                        {% else %}
                            女
                        {% endif %}
                        </td>
                        <td>{{ student.cls.title }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" id="stuadd_modal">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h5 class="modal-title" id="myModalLabel">添加学生</h5>
                </div><!-- end .modal-header -->
                <div class="modal-body">

                    <form class="form-horizontal">

                        <div class="form-group">
                            <label for="stu_name" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="stu_name" name="stu_name"
                                       placeholder="name">
                            </div>
                        </div><!-- group  -->
                        <div class="form-group">
                            <label for="stu_age" class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="stu_age" name="stu_age" placeholder="age">
                            </div>
                        </div><!-- group  -->

                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-5">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="inlineRadio1" value="1"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="inlineRadio2" value="0"> 女
                                </label>

                            </div>
                        </div><!-- group  -->

                        <div class="form-group">
                            <label for="class_name" class="col-sm-2 control-label">班级</label>
                            <div class="col-sm-3">
                                <select class="form-control" id="class_name" name="class_name">
                                    {% for class in class_list %}
                                        <option value="{{ class.id }}">{{ class.title }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div><!-- group  -->

                    </form><!-- end form -->
                </div><!-- end .modal-body  -->

                <div class="modal-footer">
                    <div class="col-lg-6">
                        <span id="modal_error_msg"  ></span>
                    </div>

                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="stuadd_modal_submit">确定</button>
                </div><!-- end .modal-footer-->

            </div> <!--end .modal-content -->
        </div> <!-- end .modal-dialog-->
    </div> <!-- end .modal fade -->

    <!-- script start -->
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/plugin/bootstrap-3.3.7/js/bootstrap.js"></script>
    <script>
        $(function () {
            bindClickEvent();
        });

        function bindClickEvent() {
            $('#addStudent').click(function () {
                $('#myModal').modal('show');
            });

            $('#stuadd_modal_submit').click(function () {
                var stu_data = {};
                $('#stuadd_modal').find('input,select').each(function () {
{#                    console.log(this);#}
                    var stu_key = $(this).attr('name');
                    var stu_value = $(this).val();
{#                    console.log(stu_key);#}
{#                    console.log(stu_value);#}
                    if (stu_key == 'gender') {
                        if (!$(this).prop('checked')) {
                            {#continue;#}
                            return true;
                        }
                    }
                    stu_data[stu_key] = stu_value;
                });
{#                //console.log(stu_data); //{stu_name: "aa", stu_age: "bb", gender: "1", class_name: "1"}#}

                $.ajax({
                    url:'/add_students/',
                    type:'POST',
                    data:stu_data,
                    success:function (args) {
                        var respone_dict=JSON.parse(args);
                        if(respone_dict.status) {
{#                            console.log("success");#}
                            window.location.reload();
                        }else{
                            $('#modal_error_msg').text(respone_dict.msg);
                        }
                    }
                })
            });
        }{#function end#}

    </script>

</body>
</html>
#!/usr/bin/env python3
# -*- coding:utf-8 -*-
# info:
import json

from django.shortcuts import  render,get_list_or_404,redirect,HttpResponse
from  app01.models import  Classes,Students,Teachers

def get_students(request):
    student_list=Students.objects.all()
    class_list=Classes.objects.all()
    return  render(request,'get_students.html',{"student_list":student_list,'class_list':class_list})

def add_students(request):
    response_dict={"status":True,"msg":None}
    # {stu_name: "aa", stu_age: "bb", gender: "1", class_name: "1"}  # }
    try:
        stu_name=request.POST.get('stu_name')
        stu_age=request.POST.get('stu_age')
        gender=request.POST.get('gender')
        class_id=request.POST.get('class_name')
        Students.objects.create(name=stu_name,age=stu_age,gender=gender,cls_id=class_id)
    except Exception as e:
        response_dict['status']=False
        response_dict['msg']=str(e)
    response_json=json.dumps(response_dict)
    return HttpResponse(response_json)

def edit_students(request,student_id):
    pass
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI