在django admin详情表单显示中添加自定义控件的实现

在开发中有需求在详情显示里外键字段内容,并且添加按钮弹窗内容,以及按钮跳转内容。

以前并没有做过相似的开发,我们的后台是xadmin,当时正在研究xadmin的插件,于是想着能不能用插件去做,后来发现太麻烦,而且实现起来我也没研究通,主要是添加按钮之类的没搞懂,于是就换了一种简单的方法。

首先先讲解下思路,admin中有几个界面,一个是展示的list界面,一个是详情的model界面,model中其实就是详情detail,里面记录了此条数据的全部内容,精简来说就是一个form表单的内容展示。

那么知道了这个就好解决了,我们只需要在form.py里添加对应的字段即可。

form自带了widget控件,比如我想在里面添加一个按钮,记录用户的积分消耗情况,那么就可以在类名下直接添加:

from django.forms import widgets
class AForm(forms.ModelForm):
 point = forms.CharField(
    label=u"积分消耗情况",
    widget=widgets.TextInput(attrs={'class': '[你需要的css样式]', 'value': '积分使用查询',
                 'style': 'width:100px','type':'button'}),
  )

解释下代码,首先导入widgets类,在form中添加一个字段,字段中有一个widget参数,我们可以在其中设置控件,我在里面添加了一个input类型,TextInput对象中的参数attrs传入的是一个字典,我们可以在里面像写html一样写相关的css样式。

这个时候我们就可以在详情内看见button了,但是相对应的,在detail的表单中添加后,在add的表单中也会出现一个button,这个不是我们想要的,所以就要想办法让button只存在于detail界面中,这时我们需要重写__init__方法:

def __init__(self, data=None, files=None, auto_id='id_%s', prefix=None,
         initial=None, error_class=ErrorList, label_suffix=None,
         empty_permitted=False, instance=None, use_required_attribute=None):
     if instance:
       pk = instance.pk
       if not initial:
         initial = {}
         // initial['point'] = [value]
         self.base_fields['point'].widget.input_type = 'button'
     else:
       self.base_fields['point'].widget.input_type = 'hidden'
     super(CustomerUserForm, self).__init__(data, files, auto_id, prefix, initial, error_class, label_suffix, empty_permitted, instance, use_required_attribute)

用super调用了__init__方法,instance就是创建后该条数据的实例,我们可以在其中判断,如果instace存在的话,那么获取其中的id可以进行其他的操作,假如我们的point不是一个button,而是一个text格式的input,那么我们就可以在[value]处添加我们想要获取的值,并在attrs中将type改为hidden,可以看到我调用了一个self.base_fields[‘point']这个对象就是我们创建的button按钮。

self.base_fields是一个字典,里面添加了我们自定义的字段(我记得是的,如果有误可自行查看),通过字段name查询出该字段对象,掉用方法即可进行css样式的修改。

当instance不存在时,也就意味着对象还没有创建,我们此时正处于add界面,那么就可以用self.base_fileds字典将widget对象取出,把type设置为hidden。

至此,我们的form添加额外字段显示以及button操作就完成了,还有最后一点,当type为text时我们直接添加value即可,type为button时,如果需要点击弹窗该如何操作。

我们可以重写widgets.TextInput方法

class PointInput(widgets.TextInput):
  class Media:
    js = (
      'admin/js/customform.js',
    )
    css = {'all':'[csspath]'}

在media内部类中的js和css对象添加相应的静态文件即可。

而弹出窗口的值获取可以在form中添加一个hidden字段,value为我们想要获取的值,在js中取值赋值即可。

补充知识:Django admin 列表每行后面添加审核按钮

我就废话不多说了,还是直接看代码吧!

  def pass_audit_str(self):
    parameter_str = 'id={}&status={}'.format(str(self.id), str(self.audit))
    color_code = ''
    btn_str = '<a class="btn btn-xs btn-danger" href="{}" rel="external nofollow" >' \
         '<input name="通过审核"' \
         'type="button" id="passButton" ' \
         'title="passButton" value="通过审核">' \
         '</a>'
    return format_html(btn_str, '/pass_audit/?{}'.format(parameter_str))

pass_audit_str.short_description = '通过审核'

在model类添加上面的方法和语句。

在admin类中的把 pass_audit_str 加入到list_display元组中

list_display = ('id', 'create_time', 'pass_audit_str',)

刷新页面即可;

以上这篇在django admin详情表单显示中添加自定义控件的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 屏蔽Django admin界面添加按钮的操作

    例如,我想去掉某个Model界面的增加按钮,如下图所示: 一般的做法是修改 template,但是,有没有更简便易行的方法呢?答案是肯定的. 只需要修改admin.py中对应的 ModelAdmin 即可. 下面是本人修改的代码: 补充知识:Django admin 列表每行后面添加审核按钮 我就废话不多说了,还是直接看代码吧! def pass_audit_str(self): parameter_str = 'id={}&status={}'.format(str(self.id), str

  • django admin后管定制-显示字段的实例

    先说需求: 1.django 自带了admin后管,如果我们需要使用,只需把我们定义的models注册即可: 2.但如果只是简单注册,那显示的很简单,根本看不到每行记录的描述信息,全部以model object 形式显示,必须点击进去才能看到信息,太不方便,如下图: 1.显示关键信息 效果如下图,这样就好看多啦. 2.配置 在 admin.py 文件中配置一下就行. admin.py # Underwriter admin model class UnderwriterAdmin(admin.M

  • Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式

    Django自带有个强大的后天管理系统,接下来我就给大家介绍一下x的admin一些强大的操作及后台美化. 首先给大家介绍一些xadmin的注册创建,首先下载官方xadmin插件包放到对应的第三方apps_extra文件夹中 接下来就是在setting中注册xadmin和crispy_forms到INSTALLED_APPS,接下来就是在我们的urls.py文件中配置路由 import xadmin urlpatterns = [ """ url(r'^xadmin/', xa

  • 在django admin详情表单显示中添加自定义控件的实现

    在开发中有需求在详情显示里外键字段内容,并且添加按钮弹窗内容,以及按钮跳转内容. 以前并没有做过相似的开发,我们的后台是xadmin,当时正在研究xadmin的插件,于是想着能不能用插件去做,后来发现太麻烦,而且实现起来我也没研究通,主要是添加按钮之类的没搞懂,于是就换了一种简单的方法. 首先先讲解下思路,admin中有几个界面,一个是展示的list界面,一个是详情的model界面,model中其实就是详情detail,里面记录了此条数据的全部内容,精简来说就是一个form表单的内容展示. 那么

  • 自定义django admin model表单提交的例子

    如下所示: 希望可以从对admin提交的密码加密,并验证电话号码均为数字. 查看admin.py from django.contrib import admin class courseAdmin(admin.ModelAdmin) 我们自定义的管理类,继承与admin.ModelAdmin 查看对应admin模块对应源码 __init__.py from django.contrib.admin.options import ( HORIZONTAL, VERTICAL, ModelAdmi

  • Django admin model 汉化显示文字的实现方法

    1.将添加blog的后台基本操作 在blog文件夹下新建一个admin.py文件加入一下代码: from django.contrib import admin from djcms.apps.blog.models import Post, Category, Tag admin.site.register(Post) admin.site.register(Category) admin.site.register(Tag) 重启服务,再到浏览器上登录到后台,是不是增加了对blog的基本操作

  • HTML的form表单和django的form表单

    django的表单系统,分2种 基于django.forms.Form的所有表单类的父类 基于django.forms.ModelForm,可以和模型类绑定的Form 直接用原生的form表单,也可以直接用,较麻烦, django的form表单,也可用可不要, 在views里创建一个类,继承了forms.Form ,每个字段就是一个输入框, #----- #django 的form表单 from django import forms class MyForm(forms.Form): #for

  • Django model.py表单设置默认值允许为空的操作

    blank=True 默认值为blank=Flase,表示默认不允许为空, blank=True admin级别可以为空 null=True 默认值为null=Flase,表示默认不允许为空 null=True 数据库级别可以为空 补充知识:Django中models.py字段选项null和blank的区别和使用 1.null 如果null=True,数据库中空值储存为NULL,默认为False. 2.blank 如果blank=True,则允许字段为空.默认为False. 需要注意的是,这不同

  • Django之提交表单与前后端交互的方法

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请求 GET 请求过程 前端通过ajax发起GET请求,json格式数据 var data = { "name": "test", "age": 1 }; $.ajax({ type: 'GET', url: /your/url/, data: dat

  • layui将table转化表单显示的方法(即table.render转为表单展示)

    现有一个 table.render({ id : 'table', type:'post', elem : '#table', url : url, where : {'Id' : $data.Id}, page:false, cols : [ [ //表头 ]] }) 最简单直接用ajax请求,确保url路径正确 $.ajax({ dataType:'json', type:'post', url:url, data:{'Id': $data.Id}, success:function (da

  • 浅谈angular表单提交中ng-submit的默认使用方法

    在表单提交的时候,我使用了一个button,但ng-submit写在form标签中,然而button中我未使用任何方法访问submit()函数 <div ng-app="dkr"> <div ng-controller="logincontrol"> <form ng-submit="submit(user)"> <div>账号名 <input type="text" ng

  • js表单处理中单选、多选、选择框值的获取及表单的序列化

    本文总结了下在表单处理中单选.多选.选择框值的获取及表单的序列化,写成了一个对象.如下: var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value != '')

随机推荐