目录　

　　1.form通过attr设置属性
　　2.输入框设置表单状态
　　3.modelform的使用
　　4.结合modelform 使用for循环生成输入框
　　5.基于init构造方法设置样式
　　6.基本增删改查案例
　　7.基于ajax和sweetalert实现删除操作

以text input框为例

模板文件需要有bootstrape

from django import forms

class DepForm(forms.Form):

    name = forms.CharField(label="部门名称",widget=forms.TextInput(attrs={'class':'form-control'}))  #可以添加多个

    count = forms.IntegerField(label="部门人数")   #IntegerField没有这个属性

def department_add(request):

    form_obj = DepForm()

    return  render(request,'department_add.html',{'form_obj':form_obj})

模板文件如下:

{% extends 'layout.html' %}

{% block content %}

    <div class="container">

        <div style="margin-top: 20px">

           <form class="form-horizontal">

  <div class="form-group">

    <label for="{{ form_obj.name.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.name.label }}</label>

    <div class="col-sm-8">

{#      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">#}

        {{ form_obj.name }}

        {{ form_obj.name.errors }}

    </div>

  </div>

   <div class="form-group">

    <label for="{{ form_obj.count.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.count.label }}</label>

    <div class="col-sm-8">

        {{ form_obj.count }}

        {{ form_obj.count.errors }}

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">Sign in</button>

    </div>

  </div>

</form>

        </div>

    </div>

{% endblock %}

 输入框设置表单状态,错误时显示红色错误提示

#通过if 判断和bootstrape实现

{% extends 'layout.html' %}

{% block content %}

    <div class="container">

        <div style="margin-top: 20px">

           <form class="form-horizontal" method="post" action="" novalidate>

               {% csrf_token %}

  <div class="form-group {% if form_obj.name.errors %}has-error{% endif %}">

    <label for="{{ form_obj.name.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.name.label }}</label>

    <div class="col-sm-8">

        {{ form_obj.name }}

         <span  class="help-block">{{ form_obj.name.errors.0 }}</span>

    </div>

  </div>

   <div class="form-group">

    <label for="{{ form_obj.count.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.count.label }}</label>

    <div class="col-sm-8">

{#      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">#}

        {{ form_obj.count }}

        {{ form_obj.count.errors.0 }}

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">Sign in</button>

    </div>

  </div>

</form>

        </div>

    </div>

{% endblock %}

设置modelform

class DepForm(forms.ModelForm):

    class Meta:

        #models 根据某一个模型生成对应的字段

        model = models.Department  #model命令否则会报错

        fields = '__all__'  #拿所有的字段 fields = ['name'] 拿想拿的字段

        #exclude = ['count'] 排除不想要的字段

        # labels = {

        #     'name':'名称'    #设置提示

        # }

        widgets = {

            'name':forms.TextInput(attrs={'class':'form-control'})   #设置样式

        }

        error_messages = {

            'name':{'required':'此项是必填的'}                    #设置错误提示信息

        }

通过for循环生成多个输入框

{% extends 'layout.html' %}

{% block content %}

    <div class="container">

        <div style="margin-top: 20px">

            <form class="form-horizontal" method="post" action="" novalidate>

                {% csrf_token %}

                {% for field in form_obj %}

                    <div class="form-group {% if form_obj.name.errors %}has-error{% endif %}">

                        <label for="{{ field.id_for_label }}"

                               class="col-sm-2 control-label">{{ field.label }}</label>

                        <div class="col-sm-8">

                            {{ field }}

                            <span class="help-block">{{ field.errors.0 }}</span>

                        </div>

                    </div>

                {% endfor %}

                <div class="form-group">

                    <div class="col-sm-offset-2 col-sm-10">

                        <button type="submit" class="btn btn-default">Sign in</button>

                    </div>

                </div>

            </form>

        </div>

    </div>

{% endblock %}

通过init方法统一设置样式

class DepForm(forms.ModelForm):

    def __init__(self,*args,**kwargs):

        super().__init__(*args,**kwargs)  #初始化父类方法

        print(self.fields)

        for field in self.fields.values():

            field.widget.attrs = {'class':'form-control'}

    class Meta:

        #models 根据某一个模型生成对应的字段

        model = models.Department  #model命令否则会报错

        fields = '__all__'  #拿所有的字段 fields = ['name'] 拿想拿的字段

def department_add(request):

    form_obj = DepForm()

    if request.method == 'POST':

        form_obj = DepForm(request.POST)

        if form_obj.is_valid():

            """

            数据校验成功

            """

            print(form_obj.cleaned_data)

            # models.Department.objects.create(name=form_obj.cleaned_data.get('name'),count=form_obj.cleaned_data['count'])

            #models.Department.objects.create(**form_obj.cleaned_data)
　　　　　　　　form_obj.save() #直接把数据插入数据库里面

            return redirect("/department_list/")

    return  render(request,'department_add.html',{'form_obj':form_obj})

查询案例

后台代码

def department_list(request):

    all_depart = models.Department.objects.all()

    return render(request,'department_list.html',{'all_depart':all_depart})

模板代码

{% extends 'layout.html' %}

{% block content %}

    <div class="container" style="margin-top: 10px">

        <table class="table table-bordered">

    <thead>

        <tr>

            <th>序号</th>

            <th>名称</th>

            <th>人数</th>

            <th>操作</th>

        </tr>

    </thead>

    <tbody>

        {% for depart in all_depart %}

            <tr>

                <td>{{ forloop.counter }}</td>

                <td>{{ depart.name }}</td>

                <td>{{ depart.count }}</td>

                <td>

                    <a href="{% url 'department_edit' depart.pk %}"><i class="fa fa-edit"></i>

                    </a>

                    <a href="{% url 'department_del' depart.pk %}"><i class="fa fa-trash-o"></i></a>

                </td>

            </tr>

        {% endfor %}

    </tbody>

</table>

    </div>

{% endblock %}

添加案例

后端代码

def department_add(request):

    form_obj = DepForm()

    if request.method == 'POST':

        form_obj = DepForm(request.POST)

        if form_obj.is_valid():

            """

            数据校验成功

            """

            print(form_obj.cleaned_data)

            # models.Department.objects.create(name=form_obj.cleaned_data.get('name'),count=form_obj.cleaned_data['count'])

            models.Department.objects.create(**form_obj.cleaned_data)

            return redirect("/department_list/")

    return  render(request,'department_add.html',{'form_obj':form_obj})

模板代码

{% extends 'layout.html' %}

{% block content %}

    <div class="container">

        <div style="margin-top: 20px">

            <form class="form-horizontal" method="post" action="" novalidate>

                {% csrf_token %}

                {% for field in form_obj %}

                    <div class="form-group {% if form_obj.name.errors %}has-error{% endif %}">

                        <label for="{{ field.id_for_label }}"

                               class="col-sm-2 control-label">{{ field.label }}</label>

                        <div class="col-sm-8">

                            {{ field }}

                            <span class="help-block">{{ field.errors.0 }}</span>

                        </div>

                    </div>

                {% endfor %}

                <div class="form-group">

                    <div class="col-sm-offset-2 col-sm-10">

                        <button type="submit" class="btn btn-default">提交</button>

                    </div>

                </div>

            </form>

        </div>

    </div>

{% endblock %}

编辑案例

后端代码

def department_edit(request,pk):

    obj = models.Department.objects.filter(pk=pk).first()

    form_obj = DepForm(instance=obj)

    if request.method == 'POST':

        form_obj = DepForm(request.POST,instance=obj) #包含原始数据和新数据

        if form_obj.is_valid():

            form_obj.save()

            return redirect('/department_list/')

    return render(request, 'department_edit.html', {'form_obj': form_obj})

模板代码

{% extends 'layout.html' %}

{% block content %}

    <div class="container">

        <div style="margin-top: 20px">

            <form class="form-horizontal" method="post" action="" novalidate>

                {% csrf_token %}

                {% for field in form_obj %}

                    <div class="form-group {% if form_obj.name.errors %}has-error{% endif %}">

                        <label for="{{ field.id_for_label }}"

                               class="col-sm-2 control-label">{{ field.label }}</label>

                        <div class="col-sm-8">

                            {{ field }}

                            <span class="help-block">{{ field.errors.0 }}</span>

                        </div>

                    </div>

                {% endfor %}

                <div class="form-group">

                    <div class="col-sm-offset-2 col-sm-10">

                        <button type="submit" class="btn btn-default">提交</button>

                    </div>

                </div>

            </form>

        </div>

    </div>

{% endblock %}

简单删除案例

def department_del(request,pk):

    obj = models.Department.objects.filter(pk=pk).first().delete() #根据pk找到对象

    return redirect('department_list')

通过ajax和sweetalert删除数据案例

https://sweetalert.js.org/guides/

后端代码

from django.http.response import JsonResponse

def department_del(request,pk):

    ret = {'status':0,'msg':'删除成功'}

    obj = models.Department.objects.filter(pk=pk).first().delete() #根据pk找到对象

    # return redirect('department_list')

    print(pk)

    return JsonResponse(ret)

模板文件代码

{% extends 'layout.html' %}

{% load static %}

{% block content %}

    <div class="container" style="margin-top: 10px">

        {% csrf_token %}

        <table class="table table-bordered">

            <thead>

            <tr>

                <th>序号</th>

                <th>名称</th>

                <th>人数</th>

                <th>操作</th>

            </tr>

            </thead>

            <tbody>

            {% for depart in all_depart %}

                <tr>

                    <td>{{ forloop.counter }}</td>

                    <td>{{ depart.name }}</td>

                    <td>{{ depart.count }}</td>

                    <td>

                        <a href="{% url 'department_edit' depart.pk %}"><i class="fa fa-edit"></i>

                        </a>

                        <a href=""><i url="{% url 'department_del' depart.pk %}" class="fa fa-trash-o"></i></a>

                    </td>

                </tr>

            {% endfor %}

            </tbody>

        </table>

    </div>

{% endblock %}

{% block js %}

    <script>

        $('.fa-trash-o').click(function () {

            swal({

                title: "Are you sure?",

                text: "Once deleted, you will not be able to recover this imaginary file!",

                icon: "warning",

                buttons: true,

                dangerMode: true,

            })

                .then((willDelete) => {

                    if (willDelete) {

                        $.ajax({

                            url: $(this).attr('url'),

                            type: 'post',

                            headers: {

                                'x-csrftoken': $('input[name="csrfmiddlewaretoken"]').val(),

                            },

                            success: (ret) => {

                                if (!ret.status) {

                                    $(this).parent().parent().parent().remove();

                                    swal("Poof! Your imaginary file has been deleted!", {

                                        icon: "success",

                                    });

                                }

                            }

                        });

                    } else {

                        swal("Your imaginary file is safe!");

                    }

                });

        })

    </script>

{% endblock %}

ps:测试的过程中有点小瑕疵,但是功能基本上都能实现.

django form 和modelform样式设置的更多相关文章

  1. Django Form和ModelForm组件

    Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

  2. Django Form and ModelForm

    Form介绍 在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否输入,输 ...

  3. Django Form and Modelform Admin定义 高级查询）

    Django的form表单一般具有两种功能 1. 验证输入 2.输入HTML ---------模板----------- from django import forms class BookFor ...

  4. Django - Form和ModelForm

    [TOC] 一. form介绍 1.生成页面可用的HTML标签 2. 提供input可以提交数据 3. 对用户提交的数据进行校验 4. 保留上次输入内容 5. 提供错误信息 二. 普通方式书写注册功能 ...

  5. Django—Form、ModelForm

    一.Form form.py from django import forms from django.core.exceptions import ValidationError from djan ...

  6. {Django基础十之Form和ModelForm组件}一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 ModelForm

    Django基础十之Form和ModelForm组件 本节目录 一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 Model ...

  7. Django基础十之Form和ModelForm组件

    一 Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户 ...

  8. 12.Django基础十之Form和ModelForm组件

    一 Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户 ...

  9. Django之Form与ModelForm组件

    Django之Form与ModelForm组件 1.Form介绍 Form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 O 保留上次的输入内容 普通方式手写注册功能 vi ...

随机推荐

  1. C++ STL swap_range

    #include <iostream>#include <vector>#include <deque>#include <algorithm> usi ...

  2. Qt编写安防视频监控系统10-视频轮询

    一.前言 视频轮询在视频监控系统中是一个基础的核心功能,尤其是上了大屏以后,这个功能是必须的,根据预先设定的轮询间隔逐个加载视频到预先设定的通道画面数中,轮询间隔.轮询画面数.轮询采用的码流类型(主码 ...

  3. Qt编写数据可视化大屏界面电子看板5-恢复布局

    一.前言 恢复布局这个功能在整个数据可视化大屏界面电子看板系统中非常有用,很多时候不小心把现有布局拖动乱了,(当然如果不想布局被拖动改动,可以修改配置文件中的MoveEnable参数来控制,默认为真表 ...

  4. jemter 90%line的解释

    假如: 有10个数: 1.2.3.4.5.6.7.8.9.10    按由大到小将其排列. 求它的第90%百分位,也就是第9个数刚好是9 ,那么他的90%Line 就是9 . 另一组数: 2.2.1. ...

  5. Swagger下载的zip文件无法打开，而且大小比直接下载的要大

    以前写的一个rest提供的是浏览器下载zip包的功能,前端界面调用rest可以正常地下载. 今天使用Swagger来调试下载功能时,发现下载的zip包打不开,而且大小也比直接在浏览器中输入rest地址 ...

  6. 我的dbtreeview–treeview直接连接数据表_delphi教程

    unit Unit1; interface uses  Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs ...

  7. 启动mongodb报错，无法连接mongodb

    报错原因如下: MongoDB shell version v3.4.2 connecting to: mongodb://127.0.0.1:27017 --01T12:: W NETWORK [t ...

  8. python函数，定义，参数，返回值

    python中可以将某些具备一定功能的代码写成一个函数,通过函数可以在一定程度上减少代码的冗余,节约书写代码的时间.因为有一些代码实现的功能我们可能会在很多地方用到. 1.函数的声明与定义 通过def ...

  9. Docker使用pipework配置本地网络

    需求 在使用Docker的过程中,有时候我们会有将Docker容器配置到和主机同一网段的需求.要实现这个需求,我们只要将Docker容器和主机的网卡桥接起来,再给Docker容器配上IP就可以了. 下 ...

  10. Python3 Selenium自动化web测试 ==>FAQ：Unittest测试报告生成文件名加测试完成时间字符串

    测试代码,虽然有点笨重,以后再修改: if __name__ == '__main__': report = os.path.join('D:/Python36/report/report.html' ...