django form 和modelform樣式設置

 

目錄　

　　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:測試的過程中有點小瑕疵,但是功能基本上都能實現.