您的位置：首页 > Web前端 > BootStrap

django modal + bootstrap

2018-03-02 18:17 344 查看 


<!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>
<h4 class="modal-title" id="myModalLabel">添加学生</h4>
</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"  style="color: red"></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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  django bootstrap jquery
相关文章推荐
新的分享
章节导航