[oldboy-django][2深入django]学生管理(Form)-- 添加(美化Form表单:通过form给前端标签添加属性)
1 在student_list添加一个a标签,
<p><a href="/app01/add_student" class="btn btn-primary">添加</a> </p>
2 urls分发路由
url(r'^app01/', include('app01.urls')),
url(r'^add_student$', views.add_student),
3 前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<div style="width:500px;margin:0 auto">
<h4 style="margin-left: 25px;">添加学生</h4>
<form class="form-horizontal" action="/app01/add_student" method="POST">
{% csrf_token %}
<div class="form-group">
<label class="col-sm-2 control-label">姓名:</label>
<div class="col-sm-10">
{{ obj.name }}{{ obj.errors.name.0 }}
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">年龄:</label>
<div class="col-sm-10">
{{ obj.age }} {{ obj.errors.age.0 }}
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">邮箱:</label>
<div class="col-sm-10">
{{ obj.email }} {{ obj.errors.email.0 }}
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">班级:</label>
<div class="col-sm-10">
{{ obj.cls_id }} {{ obj.errors.cls_id.0 }}
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" value="提交"/>
</div>
</div>
</form>
</div>
</body>
</html>
4 视图
def add_student(request):
if request.method == 'GET':
obj = StudentForm()
return render(request, 'app01_add_student.html', {'obj': obj}) else:
obj = StudentForm(request.POST)
if obj.is_valid():
models.Student.objects.create(**obj.cleaned_data)
return redirect('/app01/students')
else:
return render(request, 'app01_add_student.html', {'obj': obj})
5 数据规则类设置
class StudentForm(Form):
name = fields.CharField(max_length=8, min_length=2,
widget=widgets.TextInput(attrs={'class': 'form-control'})
)
age = fields.IntegerField(max_value=25, min_value=18,
widget=widgets.TextInput(attrs={'class': 'form-control'})
)
email = fields.EmailField(widget=widgets.TextInput(attrs={'class': 'form-control'})
)
cls_id = fields.IntegerField(
# widget=widgets.Select(choices=[(1, '上海'), (2,'北京')])
# choices 类型为[(),()]
widget=widgets.Select(choices=models.Classes.objects.values_list('id', 'title'),
attrs={'class': 'form-control'})
)
6 补充:如何通过form表单实现: 给前端标签添加class等属性,以及设置Input输入框的type属性
# Form生成html标签
a. 通过Form生成Input输入框,Form标签,以及submit标签还是要在前端写的,
但是Form标签内的Input标签可以在后台实现;只需要按以下步骤
- views定义StudentForm(Form)类
- views视图函数将Form实例化对象传递给前端
- 前端{{ obj.段 }}即可 b. 通过Form设置前端Input的type属性,即设置不同类型的输入框
# 设置name为text, cls_id为下拉框
class StudentForm(Form):
name = fields.CharField(widget= widgets.InputText())
cls_id = fields.IntegerField(widget = widgets.Select()) c. 设置下拉框的内容choices属性
class StudentForm(Form):
cls_id = fields.IntegerField(
widget=widgets.Select(choices=models.Classes.objects.values_list('id', 'title'))
)
注意: choices的值必须[元组,(), ()]类型
widget=widgets.Select(choices=[(1, '上海'), (2,'北京')]) d.设置input输入框的class属性 -- attrs
name = fields.CharField(max_length=8, min_length=2,
widget=widgets.TextInput(attrs={'class': 'form-control'})
)
cls_id = fields.IntegerField(
widget=widgets.Select(
choices=models.Classes.objects.values_list('id', 'title'),
attrs={'class': 'form-control'}
)
) 注意: attrs参数必须放在TextInput或者Select等内部,而且值必须为字典 e. 通过Form设置前端Input的默认显示值
只要在视图函数将实例化一个Form对象,并且设置initial值即可
student_dict = models.Student.objects.filter(id=nid).values('name', 'age', 'email', 'cls_id').first()
obj = StudentForm(initial=student_dict)
[oldboy-django][2深入django]学生管理(Form)-- 添加(美化Form表单:通过form给前端标签添加属性)的更多相关文章
- Django笔记&教程 6-3 使用模型(models)创建表单(form)
Django 自学笔记兼学习教程第6章第3节--使用模型(models)创建表单(form) 点击查看教程总目录 本文参考:Forms for models 1 - 初步介绍 很多时候,我们使用的表单 ...
- 表单(form)成为 ajax 提交的表单(form)
1.form <form id="ff" method="post"> <div> <label for="name&q ...
- Django笔记 —— 表单(form)
最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...
- Django使用普通表单、Form、以及modelForm操作数据库方式总结
Django使用普通表单.Form.以及modelForm操作数据库主要应用于增删该查的情景下,流程通用如下,只是实现方式不一样: 进入填写表单页面: 在表单页面填写信息,并提交: 表单数据验证 验证 ...
- Django笔记&教程 6-1 表单(Form)介绍
Django 自学笔记兼学习教程第6章第1节--表单(Form)介绍 点击查看教程总目录 1 介绍 如果网站要让用户输入并提交数据(比如注册登录),则需要用到表单. 单纯的html也能写出表单,格式一 ...
- Django笔记&教程 6-2 表单(Form)基础操作
Django 自学笔记兼学习教程第6章第2节--表单(Form)基础操作 点击查看教程总目录 1 - 编写表单类 创建新的表单类的代码,一般写到一个专门的forms.py文件中(一般放在对应的app文 ...
- 10天学会phpWeChat——第八天:Form类,丰富表单提交的字段类型
通过前面七讲的系列教程,我们完成了一个包含后台并自适应PC+h5移动端的文章管理模块. 在实际的生产环境中,文章投稿.商品上传等操作并不会简单局限于一个text和textarea组成的表单.在实际中, ...
- jquery.form.js(ajax表单提交)
Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquer ...
- 表单 - Form - EasyUI提供的表单异步提交
方案一 被提交的表单 <form id="loginForm" method="post"> <table align="cente ...
随机推荐
- 集成Ehcache
提醒 这一小节的是如何在应用层(service或者module或action类)中使用ehcache 准备工作 下载ehcache 你需要一个js文件 请务必阅读下面代码中的注释!! 分情况选 ...
- iOS内存探秘
http://www.cocoachina.com/ios/20170216/18689.html iOS 内存机制特点 有限的可用内存 iPhone 设备的 RAM 一直非常紧缺,iPhone 一代 ...
- vue安装环境
vue安装环境 1. 安装node.js 先在电脑上安装node.js, https://nodejs.org/en/ 可以点击链接安装. 安装成功后,在命令板里检测是否安装成功, node -v 2 ...
- squid隐藏squid的版本号
reply_header_access Via deny all reply_header_access Cache-Control deny all reply_header_access Serv ...
- 2017.12.22 Java序列化中你不知道的事(一)
Java 序列化简介 Java 对象序列化是 JDK 1.1 中引入的一组开创性特性之一,用于作为一种将 Java 对象的状态转换为字节数组,以便存储或传输的机制,以后,仍可以将字节数组转换回 Jav ...
- tk.mybatis Example 多个or条件拼接
//需要的查询条件为 a and (b or c or d) 可以转换为 (a and b) or (a and c) or (a and d) private Example madeExample ...
- "segmentation fault " when "import tensorflow as tf"
https://github.com/tensorflow/tensorflow/issues/2034
- WebViewJavaScriptBridge的原理解析
理解WebViewJavaScriptBridge原理 前提条件都是需要bridge在OC实例化,然后二者的互调才可以进行下去 _bridge = [WebViewJavascriptBridge b ...
- JS位运算和遍历
JS位运算符 整数 有符号整数:允许使用正数和负数,第32位作为符号位,前31位才是存储位 无符号整数:只允许用正数 如果用n代表位 位数 = 2^n-1 由于位数(1.2.4.8.16...)中只有 ...
- 【NTT】loj#6261. 一个人的高三楼
去年看过t老师写这题博客:以为是道神仙题 题目大意 求一个数列的$k$次前缀和.$n\le 10^5$. 题目分析 [计数]cf223C. Partial Sums 加强版.注意到最后的式子是$f_i ...