码迷,mamicode.com
首页 > 数据库 > 详细

[oldboy-django][2深入django]学生管理(Form)-- 添加(美化Form表单:通过form给前端标签添加属性)

时间:2017-11-21 16:58:09      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:play   boot   csrf   rect   filter   添加   mode   head   email   

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>
View Code

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})
View Code

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})
    )
View Code

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)
View Code

 

  

[oldboy-django][2深入django]学生管理(Form)-- 添加(美化Form表单:通过form给前端标签添加属性)

标签:play   boot   csrf   rect   filter   添加   mode   head   email   

原文地址:http://www.cnblogs.com/liuzhipenglove/p/7873623.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!