目录　

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

  1. 以text input框为例
  2. 模板文件需要有bootstrape
  3.  
  4. from django import forms
  5.  
  6. class DepForm(forms.Form):
  7.     name = forms.CharField(label="部门名称",widget=forms.TextInput(attrs={'class':'form-control'}))  #可以添加多个
  8.     count = forms.IntegerField(label="部门人数")   #IntegerField没有这个属性
  9.  
  10. def department_add(request):
  11.     form_obj = DepForm()
  12.     return  render(request,'department_add.html',{'form_obj':form_obj})
  13.  
  14. 模板文件如下:
  15. {% extends 'layout.html' %}
  16. {% block content %}
  17.  
  18.     <div class="container">
  19.         <div style="margin-top: 20px">
  20.            <form class="form-horizontal">
  21.   <div class="form-group">
  22.     <label for="{{ form_obj.name.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.name.label }}</label>
  23.     <div class="col-sm-8">
  24. {#      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">#}
  25.         {{ form_obj.name }}
  26.         {{ form_obj.name.errors }}
  27.     </div>
  28.   </div>
  29.  
  30.    <div class="form-group">
  31.     <label for="{{ form_obj.count.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.count.label }}</label>
  32.     <div class="col-sm-8">
  33.         {{ form_obj.count }}
  34.         {{ form_obj.count.errors }}
  35.     </div>
  36.   </div>
  37.  
  38.   <div class="form-group">
  39.     <div class="col-sm-offset-2 col-sm-10">
  40.       <button type="submit" class="btn btn-default">Sign in</button>
  41.     </div>
  42.   </div>
  43. </form>
  44.  
  45.         </div>
  46.     </div>
  47. {% endblock %}
  48.  输入框设置表单状态,错误时显示红色错误提示
  49.  
  50. #通过if 判断和bootstrape实现
  51. {% extends 'layout.html' %}
  52. {% block content %}
  53.  
  54.     <div class="container">
  55.         <div style="margin-top: 20px">
  56.            <form class="form-horizontal" method="post" action="" novalidate>
  57.                {% csrf_token %}
  58.   <div class="form-group {% if form_obj.name.errors %}has-error{% endif %}">
  59.  
  60.     <label for="{{ form_obj.name.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.name.label }}</label>
  61.     <div class="col-sm-8">
  62.  
  63.         {{ form_obj.name }}
  64.          <span  class="help-block">{{ form_obj.name.errors.0 }}</span>
  65.  
  66.     </div>
  67.   </div>
  68.  
  69.    <div class="form-group">
  70.     <label for="{{ form_obj.count.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.count.label }}</label>
  71.     <div class="col-sm-8">
  72. {#      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">#}
  73.         {{ form_obj.count }}
  74.         {{ form_obj.count.errors.0 }}
  75.     </div>
  76.   </div>
  77.  
  78.   <div class="form-group">
  79.     <div class="col-sm-offset-2 col-sm-10">
  80.       <button type="submit" class="btn btn-default">Sign in</button>
  81.     </div>
  82.   </div>
  83. </form>
  84.  
  85.         </div>
  86.     </div>
  87. {% endblock %}
  88.  
  89. 设置modelform
  90.  
  91. class DepForm(forms.ModelForm):
  92.     class Meta:
  93.         #models 根据某一个模型生成对应的字段
  94.         model = models.Department  #model命令否则会报错
  95.         fields = '__all__'  #拿所有的字段 fields = ['name'] 拿想拿的字段
  96.         #exclude = ['count'] 排除不想要的字段
  97.         # labels = {
  98.         #     'name':'名称'    #设置提示
  99.         # }
  100.         widgets = {
  101.             'name':forms.TextInput(attrs={'class':'form-control'})   #设置样式
  102.         }
  103.  
  104.         error_messages = {
  105.             'name':{'required':'此项是必填的'}                    #设置错误提示信息
  106.         }

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

  1. {% extends 'layout.html' %}
  2. {% block content %}
  3.  
  4.     <div class="container">
  5.         <div style="margin-top: 20px">
  6.             <form class="form-horizontal" method="post" action="" novalidate>
  7.                 {% csrf_token %}
  8.                 {% for field in form_obj %}
  9.                     <div class="form-group {% if form_obj.name.errors %}has-error{% endif %}">
  10.  
  11.                         <label for="{{ field.id_for_label }}"
  12.                                class="col-sm-2 control-label">{{ field.label }}</label>
  13.                         <div class="col-sm-8">
  14.                             {{ field }}
  15.                             <span class="help-block">{{ field.errors.0 }}</span>
  16.  
  17.                         </div>
  18.                     </div>
  19.  
  20.                 {% endfor %}
  21.  
  22.                 <div class="form-group">
  23.                     <div class="col-sm-offset-2 col-sm-10">
  24.                         <button type="submit" class="btn btn-default">Sign in</button>
  25.                     </div>
  26.                 </div>
  27.             </form>
  28.  
  29.         </div>
  30.     </div>
  31. {% endblock %}

通过init方法统一设置样式

  1. class DepForm(forms.ModelForm):
  2.     def __init__(self,*args,**kwargs):
  3.         super().__init__(*args,**kwargs)  #初始化父类方法
  4.         print(self.fields)
  5.         for field in self.fields.values():
  6.             field.widget.attrs = {'class':'form-control'}
  7.  
  8.     class Meta:
  9.         #models 根据某一个模型生成对应的字段
  10.         model = models.Department  #model命令否则会报错
  11.         fields = '__all__'  #拿所有的字段 fields = ['name'] 拿想拿的字段
  12.  
  13. def department_add(request):
  14.     form_obj = DepForm()
  15.     if request.method == 'POST':
  16.         form_obj = DepForm(request.POST)
  17.         if form_obj.is_valid():
  18.             """
  19.             数据校验成功
  20.             """
  21.             print(form_obj.cleaned_data)
  22.             # models.Department.objects.create(name=form_obj.cleaned_data.get('name'),count=form_obj.cleaned_data['count'])
  23.             #models.Department.objects.create(**form_obj.cleaned_data)
    　　　　　　　　form_obj.save() #直接把数据插入数据库里面
  24.             return redirect("/department_list/")
  25.     return  render(request,'department_add.html',{'form_obj':form_obj})

查询案例

  1. 后台代码
  2. def department_list(request):
  3.     all_depart = models.Department.objects.all()
  4.     return render(request,'department_list.html',{'all_depart':all_depart})
  5.  
  6. 模板代码
  7. {% extends 'layout.html' %}
  8. {% block content %}
  9.     <div class="container" style="margin-top: 10px">
  10.         <table class="table table-bordered">
  11.     <thead>
  12.         <tr>
  13.             <th>序号</th>
  14.             <th>名称</th>
  15.             <th>人数</th>
  16.             <th>操作</th>
  17.         </tr>
  18.     </thead>
  19.     <tbody>
  20.         {% for depart in all_depart %}
  21.             <tr>
  22.                 <td>{{ forloop.counter }}</td>
  23.                 <td>{{ depart.name }}</td>
  24.                 <td>{{ depart.count }}</td>
  25.                 <td>
  26.                     <a href="{% url 'department_edit' depart.pk %}"><i class="fa fa-edit"></i>
  27.                     </a>
  28.                     <a href="{% url 'department_del' depart.pk %}"><i class="fa fa-trash-o"></i></a>
  29.                 </td>
  30.             </tr>
  31.         {% endfor %}
  32.  
  33.     </tbody>
  34. </table>
  35.     </div>
  36.  
  37. {% endblock %}

添加案例

  1. 后端代码
  2. def department_add(request):
  3.     form_obj = DepForm()
  4.     if request.method == 'POST':
  5.         form_obj = DepForm(request.POST)
  6.         if form_obj.is_valid():
  7.             """
  8.             数据校验成功
  9.             """
  10.             print(form_obj.cleaned_data)
  11.             # models.Department.objects.create(name=form_obj.cleaned_data.get('name'),count=form_obj.cleaned_data['count'])
  12.             models.Department.objects.create(**form_obj.cleaned_data)
  13.             return redirect("/department_list/")
  14.     return  render(request,'department_add.html',{'form_obj':form_obj})
  15.  
  16. 模板代码
  17. {% extends 'layout.html' %}
  18. {% block content %}
  19.  
  20.     <div class="container">
  21.         <div style="margin-top: 20px">
  22.             <form class="form-horizontal" method="post" action="" novalidate>
  23.                 {% csrf_token %}
  24.                 {% for field in form_obj %}
  25.                     <div class="form-group {% if form_obj.name.errors %}has-error{% endif %}">
  26.  
  27.                         <label for="{{ field.id_for_label }}"
  28.                                class="col-sm-2 control-label">{{ field.label }}</label>
  29.                         <div class="col-sm-8">
  30.                             {{ field }}
  31.                             <span class="help-block">{{ field.errors.0 }}</span>
  32.  
  33.                         </div>
  34.                     </div>
  35.  
  36.                 {% endfor %}
  37.  
  38.                 <div class="form-group">
  39.                     <div class="col-sm-offset-2 col-sm-10">
  40.                         <button type="submit" class="btn btn-default">提交</button>
  41.                     </div>
  42.                 </div>
  43.             </form>
  44.  
  45.         </div>
  46.     </div>
  47. {% endblock %}

编辑案例

  1. 后端代码
  2. def department_edit(request,pk):
  3.     obj = models.Department.objects.filter(pk=pk).first()
  4.     form_obj = DepForm(instance=obj)
  5.     if request.method == 'POST':
  6.         form_obj = DepForm(request.POST,instance=obj) #包含原始数据和新数据
  7.         if form_obj.is_valid():
  8.             form_obj.save()
  9.             return redirect('/department_list/')
  10.  
  11.     return render(request, 'department_edit.html', {'form_obj': form_obj})
  12.  
  13. 模板代码
  14. {% extends 'layout.html' %}
  15. {% block content %}
  16.  
  17.     <div class="container">
  18.         <div style="margin-top: 20px">
  19.             <form class="form-horizontal" method="post" action="" novalidate>
  20.                 {% csrf_token %}
  21.                 {% for field in form_obj %}
  22.                     <div class="form-group {% if form_obj.name.errors %}has-error{% endif %}">
  23.  
  24.                         <label for="{{ field.id_for_label }}"
  25.                                class="col-sm-2 control-label">{{ field.label }}</label>
  26.                         <div class="col-sm-8">
  27.                             {{ field }}
  28.                             <span class="help-block">{{ field.errors.0 }}</span>
  29.  
  30.                         </div>
  31.                     </div>
  32.  
  33.                 {% endfor %}
  34.  
  35.                 <div class="form-group">
  36.                     <div class="col-sm-offset-2 col-sm-10">
  37.                         <button type="submit" class="btn btn-default">提交</button>
  38.                     </div>
  39.                 </div>
  40.             </form>
  41.  
  42.         </div>
  43.     </div>
  44. {% endblock %}

简单删除案例

  1. def department_del(request,pk):
  2.     obj = models.Department.objects.filter(pk=pk).first().delete() #根据pk找到对象
  3.     return redirect('department_list')

通过ajax和sweetalert删除数据案例

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

  1. 后端代码
  2. from django.http.response import JsonResponse
  3. def department_del(request,pk):
  4.     ret = {'status':0,'msg':'删除成功'}
  5.     obj = models.Department.objects.filter(pk=pk).first().delete() #根据pk找到对象
  6.     # return redirect('department_list')
  7.     print(pk)
  8.     return JsonResponse(ret)
  9.  
  10. 模板文件代码
  11. {% extends 'layout.html' %}
  12. {% load static %}
  13. {% block content %}
  14.  
  15.     <div class="container" style="margin-top: 10px">
  16.         {% csrf_token %}
  17.         <table class="table table-bordered">
  18.             <thead>
  19.             <tr>
  20.                 <th>序号</th>
  21.                 <th>名称</th>
  22.                 <th>人数</th>
  23.                 <th>操作</th>
  24.             </tr>
  25.             </thead>
  26.             <tbody>
  27.             {% for depart in all_depart %}
  28.                 <tr>
  29.                     <td>{{ forloop.counter }}</td>
  30.                     <td>{{ depart.name }}</td>
  31.                     <td>{{ depart.count }}</td>
  32.                     <td>
  33.                         <a href="{% url 'department_edit' depart.pk %}"><i class="fa fa-edit"></i>
  34.                         </a>
  35.                         <a href=""><i url="{% url 'department_del' depart.pk %}" class="fa fa-trash-o"></i></a>
  36.                     </td>
  37.                 </tr>
  38.             {% endfor %}
  39.  
  40.             </tbody>
  41.         </table>
  42.     </div>
  43.  
  44. {% endblock %}
  45.  
  46. {% block js %}
  47.  
  48.     <script>
  49.  
  50.         $('.fa-trash-o').click(function () {
  51.             swal({
  52.                 title: "Are you sure?",
  53.                 text: "Once deleted, you will not be able to recover this imaginary file!",
  54.                 icon: "warning",
  55.                 buttons: true,
  56.                 dangerMode: true,
  57.             })
  58.                 .then((willDelete) => {
  59.                     if (willDelete) {
  60.                         $.ajax({
  61.                             url: $(this).attr('url'),
  62.                             type: 'post',
  63.                             headers: {
  64.                                 'x-csrftoken': $('input[name="csrfmiddlewaretoken"]').val(),
  65.                             },
  66.                             success: (ret) => {
  67.                                 if (!ret.status) {
  68.                                     $(this).parent().parent().parent().remove();
  69.                                     swal("Poof! Your imaginary file has been deleted!", {
  70.                                         icon: "success",
  71.                                     });
  72.                                 }
  73.                             }
  74.  
  75.                         });
  76.  
  77.                     } else {
  78.                         swal("Your imaginary file is safe!");
  79.                     }
  80.                 });
  81.  
  82.         })
  83.     </script>
  84. {% endblock %}
  85.  
  86. 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. Kali Linux更新5.2.9后 Vmware Workstation无法正常启动

    说明本脚本仅作为学习使用,请勿用于任何商业用途.本文为原创,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 最近更新了Kali后发现一个奇葩的问题,我的虚拟机不能正常使用了.启 ...

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

    修改数据 这是提交按钮的事件editSubmit 注意修改的方法是put方法.所以用requestPut 操作成功自动返回 测试 成功后自动跳转到列表页 修改后的数据

  3. ES6深入浅出-1 新版变量声明：let 和 const-1.视频 概述

    es7语法比较少,只占了一点点 ES 6 新特性一览:https://frankfang.github.io/es-6-tutorials/ 我用了两个月的时间才理解 let   https://zh ...

  4. pip使用笔记

    例子: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -U funcat -i: 指定库的安装源 -U:升级 原来已经安装的包,不带U ...

  5. CentOS7做ssh免密登录

    (1)实验环境 两台CentOS7: youxi1 192.168.1.6 youxi2 192.168.1.7 这里我将防火墙关闭进行实验,如果防火墙开启,请将端口加入到防火墙规则中. (2).目标 ...

  6. windows10 企业版 安装应用商店

    安装windows10企业版后,提示 没有nvdia control panel 在其他位置下载均不成功 必须在win10自带的应用商店中安装,但win10企业版没有应用商店, 使用下方的网盘安装应用 ...

  7. MLN 讨论 —— 基础知识

    一. MLN相关知识的介绍 1. First-order logic A first-order logic knowledge base (KB) is a set of formulas in f ...

  8. HANA数据自助查询

    SAP HANA的客户端是C/S模式的,远程使用不太方便,目前有一款TreeSoft数据库管理系统,可以实现通过web方式,访问自助查询HANA数据.大大提高工作效率.还支持MySQL,Oracle, ...

  9. Reset Password 重置密码 (CentOS 5,6,7 ; Juniper Networks: SRX100 )

    一些重置root 密码的文档分享(来自官网): CentOS 5,6,7 Juniper Networks :  SRX100 链接:https://share.weiyun.com/5BM4kwK ...

  10. Centos7 yum源配置及关闭防火墙

    清理源 #yum clean all更新源缓存 #yum makecache更新源 #yum update 设置主机名: #hostnamectl set-hostname 查看防火墙状态 #syst ...