您现在的位置是: 网站首页 >Django >DjangoCRM客户关系管理 Django
【CRM客户关系管理】15.动态ModelsForm增加自定义样式,修改初始化表单并提交
admin2018年12月4日 12:52 【Django | Html | Python 】 1093人已围观
DjangoCRM客户关系管理简介 使用Django2.1.3+Bootstrap实现CRM系统,仿照Django Admin重写后台 Github地址:https://github.com/xyliurui/DjangoCRM Django版本:2.1.3
### 动态ModelForm增加自定义样式 查看bootstrap 的表单 https://v3.bootcss.com/css/#forms ![BLOG_20181204_125842_90](/media/blog/images/2018/12/BLOG_20181204_125842_90.png "博客图集BLOG_20181204_125842_90.png") #### 静态ModelForm增加自定样式 实例参考,不加入项目代码 ```python # 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文件 ```python 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/ ![BLOG_20181204_125814_96](/media/blog/images/2018/12/BLOG_20181204_125814_96.png "博客图集BLOG_20181204_125814_96.png") #### 自定义table_edit.html模板表单样式 修改table_edit.html模板文件 ```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/ ![BLOG_20181204_125802_55](/media/blog/images/2018/12/BLOG_20181204_125802_55.png "博客图集BLOG_20181204_125802_55.png") ### 初始化修改表单的值 #### table_change视图获取修改实例初始化 修改`table_change(request, app_name, model_name, obj_id)`视图 ```python # 数据修改 @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 %}` ```html {% 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/ ![BLOG_20181204_125656_60](/media/blog/images/2018/12/BLOG_20181204_125656_60.png "博客图集BLOG_20181204_125656_60.png") ### 修改数据提交保存功能 以上数据提交后无法保存到数据库,需要在视图中增加post方法 #### table_change视图增加post方法 ```python # 数据修改 @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 }}`显示单个字段的错误提示 ```html {% 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(已被关联的),那么将会提示错误 ![BLOG_20181204_125645_61](/media/blog/images/2018/12/BLOG_20181204_125645_61.png "博客图集BLOG_20181204_125645_61.png") 当修改没有错误后就会跳转到列表页面。 ![BLOG_20181204_125631_50](/media/blog/images/2018/12/BLOG_20181204_125631_50.png "博客图集BLOG_20181204_125631_50.png")
很赞哦! (0)
相关文章
文章交流
- emoji
当前用户
未登录,点击 登录专题目录
- 【CRM客户关系管理】01.项目介绍分析
- 【CRM客户关系管理】02.设置项目需要的模型
- 【CRM客户关系管理】03.使用Bootstrap前端模板
- 【CRM客户关系管理】04.用户登录登录及访问控制
- 【CRM客户关系管理】05.动态菜单生成,绝对URL和动态URL
- 【CRM客户关系管理】06.创建djadmin APP,并进行相关配置
- 【CRM客户关系管理】07.自动发现APP注册并显示列表
- 【CRM客户关系管理】08.取出app中model的值,根据list_display配置生成数据列表
- 【CRM客户关系管理】09.根据模型中字段的choices以及时间区间来过滤数据
- 【CRM客户关系管理】10.处理无list_display和list_filter属性时的异常情况
- 【CRM客户关系管理】11.为查询结果添加分页和排序功能
- 【CRM客户关系管理】12.查询结果分页、排序、过滤组合
- 【CRM客户关系管理】13.为结果添加搜索功能,搜索后能对其进行过滤
- 【CRM客户关系管理】14.生成动态ModelForm表单功能
- 【CRM客户关系管理】15.动态ModelsForm增加自定义样式,修改初始化表单并提交
- 【CRM客户关系管理】16. 只读字段readonly_fields处理,表单排除只读显示
- 【CRM客户关系管理】17.多选字段filter_horizontal的实现,已选和未选数据展示
- 【CRM客户关系管理】18.多选字段filter_horizontal的实现,js移动多选框数据和过滤
- 【CRM客户关系管理】19.对象删除功能,显示删除的关联对象和确认
- 【CRM客户关系管理】20.增加详情页分页功能
- 【CRM客户关系管理】21.action功能开发,默认action,生成自己的action
- 【CRM客户关系管理】22.action功能开发,执行action功能,添加默认的delete action