目录　

　　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. 源码编译vi过程中进行配置时报“checking if compile and link flags for Python are sane... no: PYTHON DISABLED”怎么办?

    答: 需要安装python开发库(如果不安装这个库,那么在配置时执行./configure --enable-pythoninterp=yes将不会生效,以至于vi的python特性并没有被开启) 如 ...

  2. [go]grpc远程接口调用实现

    // grpc序列化/反序列化成对应语言的对象 // 1.写idl(数据类型+方法) // 2.生成对应语言的序列化/反序列化代码 // 3.方法需要自己实现 // 环境(将gopath/bin加入p ...

  3. SQL-W3School-高级：SQL DEFAULT 约束

    ylbtech-SQL-W3School-高级:SQL DEFAULT 约束 1.返回顶部 1. SQL DEFAULT 约束 DEFAULT 约束用于向列中插入默认值. 如果没有规定其他的值,那么会 ...

  4. centos7 搭建FTP

    通过yum安装vsftpd yum install -y vsftpd 修改vsftpd的配置文件 vim /etc/vsftpd/vsftpd.conf 修改配置文件如下: 1.不允许匿名访问 an ...

  5. C++ STL partial_sort_copy greater

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

  6. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_10-修改页面-前端-修改页面

    1.进入页面,通过钩子方法请求服务端获取页面信息,并赋值给数据模型对象 2.页面信息通过数据绑定在表单显示 3.用户修改信息点击“提交”请求服务端修改页面信息接口 3.3.3 修改页面 3.3.3.1 ...

  7. Linux命令之ntpdate、hwclock

    ntpdate用于同步系统时间.hwclock用于同步硬件时间. (1).ntpdate ntpdate [选项] [时间服务器] 一般直接ntpdate [时间服务器] 常用的时间服务器:ntp[1 ...

  8. pycharm连接linux版python

    1.建立连接 2.测试连接 3.同步目录 4.查看同步的目录 5.设置永久同步目录 6.设置连接 可以看到添加进来了 参照文档: https://www.cnblogs.com/xiao-apple3 ...

  9. Spring Boot Actuator：介绍和使用

    Spring Boot Actuator提供一系列HTTP端点来暴露项目信息,用来监控和管理项目.在Maven中,可以添加以下依赖: <!-- Spring boot starter: actu ...

  10. Re-ranking Person Re-identification with k-reciprocal Encoding

    Re-ranking Person Re-identification with k-reciprocal Encoding Abstract In this paper, we propose a ...