zoukankan      html  css  js  c++  java
  • [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="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

      

  • 相关阅读:
    Ural 2070:Interesting Numbers(思维)
    Codeforces 760B:Frodo and pillows(二分)
    Codeforces 760C:Pavel and barbecue(DFS+思维)
    Codeforces 730I:Olympiad in Programming and Sports(最小费用流)
    HDU-2102 A计划
    HDU-2181 哈密顿绕行世界问题
    HDU-1226 超级密码
    学习系列
    学习系列
    学习系列
  • 原文地址:https://www.cnblogs.com/liuzhipenglove/p/7873623.html
Copyright © 2011-2022 走看看