<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"> <style> .icon { margin: 0 8px; } </style> </head> <body> <div class="container"> <div style="padding: 20px 0;"> <a href="#" id="addBtn" class="btn btn-primary ">添加</a> <a href="#" class="btn btn-danger">删除</a> </div> <div> <table class="table table-bordered table-striped"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>班级</th> <th>操作</th> </tr> </thead> <tbody id="tb"> {% for row in stu_list %} <tr nid="{{ row.id }}"> <td na="nid">{{ row.id }}</td> <td na="user">{{ row.username }}</td> <td na="age">{{ row.age }}</td> <td na="gender">{{ row.gender }}</td> <td na="cls_id" cid="{{ row.cs_id }}">{{ row.cs.title }}</td> <td> <a class="glyphicon glyphicon-remove icon del-row"></a> <a class="fa fa-pencil-square-o icon edit-row"></a> </td> </tr> {% endfor %} </tbody> </table> </div> </div> <!-- Modal --> <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">×</span> </button> <h4 class="modal-title" id="myModalLabel">创建学生</h4> </div> <div class="modal-body"> <form id="fm" class="form-horizontal"> <div class="form-group"> <label for="username" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" name="username" placeholder="姓名"> </div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label">年龄</label> <div class="col-sm-10"> <input type="text" class="form-control" name="age" placeholder="年龄"> </div> </div> <div class="form-group"> <label for="gender" class="col-sm-2 control-label">性别</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" value="1"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" value="0"> 女 </label> </div> </div> <div class="form-group"> <label for="gender" class="col-sm-2 control-label">班级</label> <div class="col-sm-10"> <select class="form-control" name="cls_id"> {% for cla in cla_list %} <option value="{{ cla.id }}">{{ cla.title }}</option> {% endfor %} </select> </div> </div> </form> </div> <div class="modal-footer"> <span id="errorMsg" style="color: red"></span> <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> <!-- Modal --> <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="alert alert-danger" role="alert"> <h3>删除学生信息？</h3> <div><input type="text " style="display: none" id="delNid"></div> <div> <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="delConfirm" type="button" class="btn btn-danger">确定</button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="editModal" 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">×</span> </button> <h4 class="modal-title" id="myModalLabel">编辑学生</h4> </div> <div class="modal-body"> <form id="fm" class="form-horizontal"> <input type="text" name="nid" style="display: none"/> <div class="form-group"> <label for="username" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" name="user" placeholder="姓名"> </div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label">年龄</label> <div class="col-sm-10"> <input type="text" class="form-control" name="age" placeholder="年龄"> </div> </div> <div class="form-group"> <label for="gender" class="col-sm-2 control-label">性别</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" value="1"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" value="0"> 女 </label> </div> </div> <div class="form-group"> <label for="gender" class="col-sm-2 control-label">班级</label> <div class="col-sm-10"> <select class="form-control" name="cls_id"> {% for cla in cla_list %} <option value="{{ cla.id }}">{{ cla.title }}</option> {% endfor %} </select> </div> </div> </form> </div> <div class="modal-footer"> <span id="errorMsg" style="color: red"></span> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="btnEditSave">保存</button> </div> </div> </div> </div> <script src="/static/js/jquery-3.1.1.js"></script> <script src="/static/plugins/bootstrap/js/bootstrap.js"></script> <script> $(function () { bindEvent(); bindSave(); bindDel(); bindDelConfirm(); bindEdit(); bindEditConfirm(); }); //编辑提交事件 function bindEditConfirm() { $(‘#btnEditSave‘).click(function () { var postData = {}; $(‘#editModal‘).find(‘input,select‘).each(function () { var v = $(this).val(); var n = $(this).attr(‘name‘); if (n == ‘gender‘) { if ($(this).prop(‘checked‘)) { postData[n] = v; } } else { postData[n] = v; } }); $.ajax({ url: ‘/edit_student/‘, type: ‘POST‘, data: postData, dataType: ‘JSON‘, success: function (arg) { if (arg.code == 1000) { window.location.reload(); } else { alert(arg.message); } } }) }) } //绑定编辑按钮点击事件 function bindEdit() { $(‘#tb‘).on(‘click‘, ‘.edit-row‘, function () { $(‘#editModal‘).modal(‘show‘); //1、获取当前行的所有数据 //2、将数据赋值到对应的对话框的指定位置 $(this).parent().prevAll().each(function () { var v = $(this).text(); var n = $(this).attr(‘na‘); if (n == ‘cls_id‘) { var cid = $(this).attr(‘cid‘); $(‘#editModal select[name="cls_id"]‘).val(cid); } else if (n == ‘gender‘) { //v=true if (v == ‘True‘) { $(‘#editModal :radio[value="1"]‘).prop(‘checked‘, true); } else { $(‘#editModal :radio[value="0"]‘).prop(‘checked‘, true); } } else { //n=age、nid //v=18 $("#editModal input[name=‘" + n + "‘]").val(v) } }); }) } //绑定确定删除按钮点击事件 function bindDelConfirm() { $("#delConfirm").click(function () { var rowId = $("#delNid").val(); $.ajax({ url: ‘/del_student/‘, type: "GET", data: {‘nid‘: rowId}, success: function (arg) { var dict = JSON.parse(arg); if (dict.status) { $(‘tr[nid="‘ + rowId + ‘"]‘).remove() } $(‘#delModal‘).modal(‘hide‘); } }) }) } //绑定删除按钮点击事件 function bindDel() { $("#tb").on(‘click‘, ‘.del-row‘, function () { $(‘#delModal‘).modal(‘show‘); //获取当前行的ID,设置给delNid var rowId = $(this).parent().parent().attr(‘nid‘); $("#delNid").val(rowId); }) } //绑定添加按钮点击事件 function bindEvent() { $(‘#addBtn‘).click(function () { $(‘#myModal‘).modal(‘show‘) }) } //绑定添加保存按钮点击事件 function bindSave() { $(‘#btnSave‘).click(function () { var postData = {}; $(‘#myModal‘).find(‘input,select‘).each(function () { var v = $(this).val(); var n = $(this).attr(‘name‘); if (n == "gender") { if ($(this).prop(‘checked‘)) { postData[n] = v; } } else { postData[n] = v; } }); $.ajax({ url: ‘/add_student/‘, type: ‘POST‘, data: postData, success: function (arg) { {#console.log(arg);#} //arg是字符串 //JSON.parse将字符串转换为字典， json.loads var dict = JSON.parse(arg); if (dict.status) { /* postData={} 自增ID=dict.data */ nid = dict.data; createRow(postData, nid); $(‘#myModal‘).modal(‘hide‘); {#window.location.reload();#} } else { $(‘#errorMsg‘).text(dict.message) } } }) }) } //不刷新页面增加数据 function createRow(postData, nid) { var tr = document.createElement(‘tr‘); $(tr).attr(‘nid‘, nid); var tdId = document.createElement(‘td‘); tdId.innerHTML = nid; $(tr).append(tdId); var tdUser = document.createElement(‘td‘); tdUser.innerHTML = postData.username; $(tr).append(tdUser); var tdAge = document.createElement(‘td‘); tdAge.innerHTML = postData.age; $(tr).append(tdAge); var tdGender = document.createElement(‘td‘); if (postData.gender == "0") { tdGender.innerHTML = ‘False‘; } else { tdGender.innerHTML = ‘True‘; } $(tr).append(tdGender); var tdClass = document.createElement(‘td‘); var text = $(‘select[name="cls_id"]‘).find(‘option[value="‘ + postData.cls_id + ‘"]‘).text(); tdClass.innerHTML = text; $(tr).append(tdClass); var tdHandle = ‘<td><a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon edit-row"></a></td>‘; $(tr).append(tdHandle); $(‘#tb‘).append(tr); } </script> </body> </html>
from django.http import HttpResponse from django.shortcuts import render # Create your views here. from app01 import models import json def student(request): cla_list = models.Classes.objects.all() stu_list = models.Student.objects.all() return render(request , ‘student.html‘ , {‘stu_list‘: stu_list , ‘cla_list‘: cla_list}) def add_student(request): response = {‘status‘: True , ‘message‘: None , ‘data‘: None} try: u = request.POST.get(‘username‘) a = request.POST.get(‘age‘) g = request.POST.get(‘gender‘) c = request.POST.get(‘cls_id‘) obj = models.Student.objects.create( username=u , age=a , gender=g , cs_id=c , ) response[‘data‘] = obj.id except Exception as e: response[‘status‘] = False response[‘message‘] = ‘用户输入错误‘ result = json.dumps(response) return HttpResponse(result) def del_student(request): ret = {‘status‘: True} try: nid = request.GET.get(‘nid‘) models.Student.objects.filter(id=nid).delete() except Exception as e: ret[‘status‘] = False return HttpResponse(json.dumps(ret)) def edit_student(request): response = {‘code‘: 1000 , ‘message‘: None} try: nid = request.POST.get(‘nid‘) u = request.POST.get(‘user‘) a = request.POST.get(‘age‘) g = request.POST.get(‘gender‘) c = request.POST.get(‘cls_id‘) models.Student.objects.filter(id=nid).update( username=u , age=a , gender=g , cs_id=c , ) except Exception as e: response[‘code‘]=1001 response[‘message‘]=str(e) return HttpResponse(json.dumps(response))
分页组件
a.内置
b.扩展
c.自定义
f1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {% csrf_token %} <form id="fm" action="/f1.html/" method="post"> <p>{{ obj.user }}{{ obj.errors.user.0 }}</p> <p>{{ obj.pwd }}{{ obj.errors.pwd.0 }}</p> <p>{{ obj.age }}{{ obj.errors.age.0 }}</p> <p>{{ obj.email }}{{ obj.errors.email.0 }}</p> <p><input type="submit" value="提交"/></p> </form> </body> </html> index1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> {% for user in user_list %} <li>{{ user.name }}-{{ user.age }}</li> {% endfor %} </ul> {#边界问题#} <a href="/index.html?p={{ prev_pager }}">上一页</a> <a href="/index.html?p={{ next_pager }}">下一页</a> </body> </html> index1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> {% for user in posts.object_list %} <li>{{ user.name }}-{{ user.age }}</li> {% endfor %} </ul> {% include ‘include/pager.html‘ %} </body> </html> index2.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"> </head> <body> <ul> {% for row in data %} <li>{{ row.name }}-{{ row.age }}</li> {% endfor %} </ul> {% for i in page_obj.pager_num_rang%} <a href="/index2.html?p={{ i }}">{{ i }}</a> {% endfor %} <hr/> <ul class="pagination pagination-sm"> {{ page_obj.page_str|safe }} </ul> </body> </html>
from django.shortcuts import render from django.core.paginator import Paginator , EmptyPage , PageNotAnInteger # Create your views here. USER_LIST = [] for i in range(1 , 666): temp = {‘name‘: ‘root‘ + str(i) , ‘age‘: i} USER_LIST.append(temp) def index(request): per_page_count = 10 current_page = request.GET.get(‘p‘) current_page = int(current_page) start = (current_page - 1) * per_page_count end = current_page * per_page_count data = USER_LIST[start:end] prev_pager = current_page - 1 next_pager = current_page + 1 if current_page <= 1: prev_pager = 1 return render(request , ‘index.html‘ , { ‘user_list‘: data , ‘current_page‘: current_page , ‘prev_pager‘: prev_pager , ‘next_pager‘: next_pager , }) class CustomPaginator(Paginator): def __init__(self , current_page , per_pager_num , *args , **kwargs): # 当前页 self.current_page = int(current_page) # 最多显示的页码数量11 self.per_page_num = int(per_pager_num) super(CustomPaginator , self).__init__(*args , **kwargs) def pager_num_rang(self): # 总页数 if self.num_pages < self.per_page_num: return range(1 , self.num_pages + 1) # 总页数特别多 5 part = int(self.per_page_num / 2) if self.current_page <= part: return range(1 , self.per_page_num + 1) if (self.current_page + part) > self.num_pages: return range(self.num_pages - self.per_page_num + 1 , self.num_pages + 1) return range(self.current_page - part , self.current_page + part + 1) def index1(request): # 全部数据：USER_LIST，==》得出共有多少条数据 # per_page: 每页显示条目数量 # count: 数据总个数 # num_pages:总页数 # page_range:总页数的索引范围，如: (1,10),(1,200) # page: page对象（是否具有下一页；是否具有上一页；） current_page = request.GET.get(‘p‘) # Paginator对象 paginator = CustomPaginator(current_page , 7 , USER_LIST , 10) try: # Page 对象 posts = paginator.page(current_page) # has_next 是否有下一页 # next_page_number 下一页页码 # has_previous 是否有上一页 # previous_page_number 上一页页码 # object_list 分页之后的数据列表 # number 当前页 # paginator paginator对象 except PageNotAnInteger: posts = paginator.page(1) except EmptyPage: posts = paginator.page(paginator.num_pages) return render(request , ‘index1.html‘ , {‘posts‘: posts}) def index2(request): from app01.pager import Pagination current_page = request.GET.get(‘p‘) page_obj = Pagination(666 , current_page) data_list = USER_LIST[page_obj.start():page_obj.end()] return render(request , ‘index2.html‘ , {‘data‘: data_list , ‘page_obj‘: page_obj})
class Pagination(object): def __init__(self , totalCount , currentPage , perPageNum=10 , maxPageNum=6): # 数据总个数 self.total_count = totalCount # 当前页 try: v = int(currentPage) if v < 0: v = 1 self.current_page = v except Exception as e: self.current_page = 1 # 每页显示的行数 self.per_page_item_num = perPageNum # 最多显示页面 self.max_page_num = maxPageNum def start(self): return (self.current_page - 1) * self.per_page_item_num def end(self): return self.current_page * self.per_page_item_num @property def num_pages(self): ‘‘‘ 总页数 :return: ‘‘‘ # 666 # 10 a , b = divmod(self.total_count , self.per_page_item_num) if b == 0: return a return a + 1 def pager_num_rang(self): # 总页数 if self.num_pages < self.max_page_num: return range(1 , self.num_pages + 1) # 总页数特别多 5 part = int(self.max_page_num / 2) if self.current_page <= part: return range(1 , self.max_page_num + 1) if (self.current_page + part) > self.num_pages: return range(self.num_pages - self.max_page_num + 1 , self.num_pages + 1) return range(self.current_page - part , self.current_page + part + 1) def page_str(self): page_list = [] first = ‘<li><a href="/index2.html?p=1">首页</a></li>‘ page_list.append(first) if self.current_page == 1: prev = "<li><a href=‘#‘>上一页</a></li>" else: prev = "<li><a href=‘/index2.html?p=%s‘>上一页</a></li>" % (self.current_page - 1 ,) page_list.append(prev) for i in self.pager_num_rang(): if i == self.current_page: temp = "<li class=‘active‘ ><a href=‘/index2.html?p=%s‘>%s</a></li>" % (i , i) else: temp = "<li><a href=‘/index2.html?p=%s‘>%s</a></li>" % (i , i) page_list.append(temp) if self.current_page == self.num_pages: nex = "<li><a href=‘#‘>下一页</a></li>" else: nex = "<li><a href=‘/index2.html?p=%s‘>下一页</a></li>" % (self.current_page + 1) page_list.append(nex) last = ‘<li><a href="/index2.html?p=%s">尾页</a></li>‘ % (self.num_pages) page_list.append(last) return ‘‘.join(page_list)
from django.http import HttpResponse from django.shortcuts import render from django.shortcuts import redirect from django import forms from django.forms import fields # Create your views here. class F1Form(forms.Form): user = fields.CharField( max_length=18 , min_length=6 , required=True , error_messages={ ‘required‘: ‘用户名不能为空‘, ‘max_length‘: ‘太长了‘, ‘min_length‘: ‘太短了‘, } ) pwd = fields.CharField(min_length=32 , required=True) age = fields.IntegerField( required=True , error_messages={ ‘required‘: ‘年龄不能为空‘, ‘invalid‘: ‘必须为数字‘, } ) email = fields.EmailField( required=True , min_length=8 , error_messages={ ‘required‘: ‘邮箱不能为空‘, ‘invalid‘: ‘邮箱格式错误‘, } ) def f1(request): if request.method == ‘GET‘: obj=F1Form() return render(request , ‘f1.html‘,{‘obj‘:obj}) else: # u = request.POST.get(‘user‘)#不能为空，长度6-18 # p = request.POST.get(‘pwd‘)#不能为空，长度32 # e = request.POST.get(‘email‘)#不能为空，邮箱格式 # a = request.POST.get(‘age‘)#不能为空，数字类型 # 1、检查是否为空 # 2、检查格式是否正确 obj = F1Form(request.POST) # 是否全部验证成功 if obj.is_valid(): # 用户提交的数据 print(‘验证成功‘ , obj.cleaned_data) return redirect(‘http://www.xiaohuar.com‘) else: print(‘验证失败‘ , obj.errors) return render(request , ‘f1.html‘ , {‘obj‘: obj})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {% csrf_token %} <form id="fm" action="/f1.html/" method="post"> <p>{{ obj.user }}{{ obj.errors.user.0 }}</p> <p>{{ obj.pwd }}{{ obj.errors.pwd.0 }}</p> <p>{{ obj.age }}{{ obj.errors.age.0 }}</p> <p>{{ obj.email }}{{ obj.errors.email.0 }}</p> <p><input type="submit" value="提交"/></p> </form> </body> </html>
作用：验证+（生成HTML+保存上次提交的数据）
使用：
1、创建类
2、创建字段（）
3、验证用户输入：
obj=Form(request.POST,request.FILES)
if obj.is_valid():
obj.cleaned_data
else:
obj.errors
4、clean_字段
5、clean() _post_clean()
PS:__all__ 整体错误信息
JavaScript:
JSON.parse()
JSON.stringify()
Django:
json.dumps()
json.loads()
问题：
serialize : model.TB.objects.all()
json : list(model.TB.objects.values())
json : list(model.TB.objects.value_list())
原文：https://www.cnblogs.com/bind/p/11715266.html
