【CRM客户关系管理】15.动态ModelsForm增加自定义样

个人博客，欢迎查看：https://blog.starmeow.cn/

Github地址：https://github.com/xyliurui/DjangoCRM

动态ModelForm增加自定义样式

查看bootstrap 的表单 https://v3.bootcss.com/css/#forms

image.png

静态ModelForm增加自定样式

实例参考，不加入项目代码

# crm/form.py

from django.forms import ModelForm
from crm import models

class CustomerForm(ModelForm):
    class Meta:
        model = models.CustomerInfo
        fields = "__all__"

    #django是通过“__new__”方法，找到ModelForm里面的每个字段的，然后循环出每个字段添加自定义样式
    def __new__(cls, *args, **kwargs):
        #cls.base_fields是一个元祖，里面是 所有的  【(字段名，字段的对象),(),()】
        for field_name in cls.base_fields:
            filed_obj = cls.base_fields[field_name]
            #添加属性
            filed_obj.widget.attrs.update({'class':'form-control'})

        return ModelForm.__new__(cls)

动态ModelForm增加自定义样式

修改model_handle.py文件

from django.forms import ModelForm


def create_dynamic_model_form(admin_class):
    """动态生成ModelF"""

    class Meta:
        model = admin_class.model
        fields = '__all__'

    # 通过__new__(cls, *arg, **kwargs)方法，找到ModelForm里面的每个字段，然后循环出每个字段并添加自定义样式
    def __new__(cls, *args, **kwargs):
        # cls.base_fields是一个元组，格式为：OrderedDict([('字段名', 字段的对象), ()])
        # print(cls.base_fields)
        # OrderedDict([('user', <django.forms.models.ModelChoiceField object at 0x000002147D024358>), ('name', <django.forms.fields.CharField object at 0x000002147D0243C8>), ('role', <django.forms.models.ModelMultipleChoiceField object at 0x000002147D0245C0>)])

        for field_name in cls.base_fields:
            # 每个字段的对象
            field_obj = cls.base_fields[field_name]
            # 添加属性
            field_obj.widget.attrs.update({'class': 'form-control'})

        return ModelForm.__new__(cls)

    # 动态生成
    dynamic_form = type('DynamicModelForm', (ModelForm,), {'Meta': Meta, '__new__': __new__})
    return dynamic_form

此时刷新 http://127.0.0.1:8000/djadmin/crm/userprofile/2/change/

image.png

自定义table_edit.html模板表单样式

修改table_edit.html模板文件

{% extends 'djadmin/base.html' %}

{% load djadmin_tags %}

{% block title %}
    数据表修改 - 后台管理
{% endblock %}

{% block content %}
    <h1 class="page-header">{{ app_name }} - {{ model_name }} - 修改数据</h1>
    <!--<div>{{ form_obj }}</div>-->
    <form class="form-horizontal">
        {% for field in form_obj %}
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">{{ field.label }}</label>
                <div class="col-sm-10">
                    {{ field }}
                </div>
            </div>
        {% endfor %}
    </form>
{% endblock %}

刷新 http://127.0.0.1:8000/djadmin/crm/userprofile/2/change/

image.png

初始化修改表单的值

table_change视图获取修改实例初始化

修改table_change(request, app_name, model_name, obj_id)视图

# 数据修改
@login_required
def table_change(request, app_name, model_name, obj_id):
    from .form_handle import create_dynamic_model_form
    admin_class = site.enable_admins[app_name][model_name]
    model_form = create_dynamic_model_form(admin_class=admin_class)
    # 实例化
    obj = admin_class.model.objects.get(id=obj_id)  # 获取修改的实例，并将原值初始化到表单中
    form_obj = model_form(instance=obj)
    return render(request, 'djadmin/table_edit.html', locals())

修改table_edit.html模板显示和按钮

将模板中的form提交方式改为post，增加提交按钮，记得加入{% csrf_token %}

{% extends 'djadmin/base.html' %}

{% load djadmin_tags %}

{% block title %}
    数据表修改 - 后台管理
{% endblock %}

{% block content %}
    <h1 class="page-header">{{ app_name }} - {{ model_name }} - 修改【{{ obj }}】</h1>
    <!--<div>{{ form_obj }}</div>-->
    <form class="form-horizontal" method="post">
        {% for field in form_obj %}
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">{{ field.label }}</label>
                <div class="col-sm-10">
                    {{ field }}
                </div>
            </div>
        {% endfor %}
        {% csrf_token %}
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>
{% endblock %}

刷新 http://127.0.0.1:8000/djadmin/crm/userprofile/2/change/

image.png

修改数据提交保存功能

以上数据提交后无法保存到数据库，需要在视图中增加post方法

table_change视图增加post方法

# 数据修改
@login_required
def table_change(request, app_name, model_name, obj_id):
    from .form_handle import create_dynamic_model_form
    admin_class = site.enable_admins[app_name][model_name]
    model_form = create_dynamic_model_form(admin_class=admin_class)
    # 实例化
    obj = admin_class.model.objects.get(id=obj_id)  # 获取修改的实例，并将原值初始化到表单中
    form_obj = model_form(instance=obj)
    if request.method == 'POST':
        form_obj = model_form(instance=obj, data=request.POST)
        # print(form_obj.errors)
        if form_obj.is_valid():
            form_obj.save()
            # 修改保存成功后跳转
            return redirect(reverse('djadmin:table_detail', kwargs={'app_name': app_name, 'model_name': model_name}))
    return render(request, 'djadmin/table_edit.html', locals())

table_edit.html模板中增加错误提示

{{ form_obj.errors }}显示所有的错误提示，{{ field.errors.0 }}显示单个字段的错误提示

{% extends 'djadmin/base.html' %}

{% load djadmin_tags %}

{% block title %}
    数据表修改 - 后台管理
{% endblock %}

{% block content %}
    <h1 class="page-header">{{ app_name }} - {{ model_name }} - 修改【{{ obj }}】</h1>
    <!--<div>{{ form_obj }}</div>-->
    <form class="form-horizontal" method="post">
        {{ form_obj.errors }}

        {% for field in form_obj %}
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">{{ field.label }}</label>
                <div class="col-sm-10">
                    {{ field }}
                    <span style="color: red">{{ field.errors.0 }}</span>
                </div>
            </div>
        {% endfor %}
        {% csrf_token %}
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>
{% endblock %}

当关系User选admin（已被关联的），那么将会提示错误

image.png

当修改没有错误后就会跳转到列表页面。

image.png