Django Admin 详情表单添加自定义按钮与控件实现

Django Admin 自定义控件需求与背景

在开发过程中，有时需要在 Django Admin 的详情展示页面中显示外键字段的具体内容，同时需要添加按钮以触发弹窗显示相关信息，或实现按钮跳转功能。

此前未接触过此类开发，项目后台使用的是 xadmin。当时曾尝试通过 xadmin 插件实现，但发现过程繁琐且难以深入，特别是添加按钮等交互逻辑未能完全理清。因此，最终选择了一种更简单的实现方案。

Admin 界面结构与解决思路

首先梳理思路：Django Admin 主要包含列表界面（list）和详情界面（model/detail）。详情界面本质上是展示单条数据全部内容的表单（form），即对 form 表单内容的只读或编辑展示。

明确上述结构后，解决思路变得清晰：只需在对应的 form.py 文件中添加所需的字段即可实现。

Form 中定义自定义字段与 Widget

Django 的 Form 内置了 widget 控件。例如，若需在表单中添加一个按钮来记录用户的积分消耗情况，可以直接在 Form 类中定义该字段。

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 样式。

重写 __init__ 区分详情与新增页面

此时，在详情页面即可看到按钮。但问题在于，若在 detail 表单中直接添加，add（新增）表单中也会同步出现该按钮，这并非预期效果。因此，需要重写 __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)

在 __init__ 方法中调用 super() 初始化父类，其中 instance 参数代表当前数据实例。若 instance 存在，说明是编辑或查看已有数据，可获取其 id 进行后续操作。例如，若 point 字段不是按钮而是文本输入框，可在 [value] 处填入获取的值，并将 attrs 中的 type 改为 hidden。这里通过 self.base_fields['point'] 获取之前创建的按钮对象。

self.base_fields 是一个字典，存储了自定义字段（具体结构可查阅文档，此处假设正确）。通过字段 name 查询出对应的字段对象后，即可调用相关方法修改其 CSS 样式或属性。

当 instance 不存在时，表示对象尚未创建，当前处于 add（新增）界面。此时，从 self.base_fields 字典中取出 widget 对象，将其 type 设置为 hidden，从而在新增页面隐藏该按钮。

至此，Form 中额外字段的显示及按钮操作基本完成。最后一点需注意：当 type 为 text 时，直接添加 value 即可；但当 type 为 button 时，若需实现点击弹窗效果，还需进一步处理。

实现点击弹窗与静态资源引入

可以通过重写 widgets.TextInput 类来实现自定义行为。

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

在自定义 Widget 的 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 类的 list_display 元组中加入 pass_audit_str 字段。

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

刷新页面即可看到效果。

以上即为在 Django Admin 详情表单中添加自定义控件的完整实现过程，供参考。