如何在Django Admin默认模型表单中添加JavaScript文件

一、修正Media类的路径问题 #

你当前Media类里的JS路径多了static前缀，Django会自动从静态文件目录查找资源，不需要手动添加该前缀。修改后的代码如下：

class ExampleForm(forms.ModelForm):
    class Meta:
        model = Example
        fields = "__all__"
    
    username = forms.CharField(required=False, max_length=100)
    password = forms.CharField(widget=forms.PasswordInput, required=False, max_length=100)

    class Media:
        # 移除static前缀，使用相对路径
        js = ('app_name/js/custom.js',)

二、确保Admin正确关联自定义表单 #

在Admin注册模型时，必须明确指定使用该自定义表单，否则Media类的配置不会生效：

from django.contrib import admin
from .models import Example
from .forms import ExampleForm

class ExampleAdmin(admin.ModelAdmin):
    form = ExampleForm

admin.site.register(Example, ExampleAdmin)

三、验证静态文件配置与目录结构 #

1. 确认静态文件目录结构正确：
   需对应为 项目根目录/app_name/static/app_name/js/custom.js，和Media类中声明的路径匹配。
2. 检查settings.py中的静态文件配置：

   STATIC_URL = '/static/'
   # 若有自定义静态目录，需添加到STATICFILES_DIRS
   # STATICFILES_DIRS = [BASE_DIR / "static",]
   

四、排查Media未加载的常见问题 #

• 强制刷新浏览器（Ctrl+F5），清除缓存后重新加载页面。
• 查看页面源码，搜索custom.js，确认是否生成了对应的script标签。
• 旧版Django需确保默认Admin模板包含{{ media }}标签（新版Django默认已包含）。

五、若必须通过模板添加JS（不破坏默认样式） #

无需重写整个Admin模板，仅需扩展默认模板即可：

1. 在项目templates目录下创建路径：templates/admin/app_name/example/（替换为你的app名和模型名）。
2. 创建change_form.html文件，内容如下：

{% extends "admin/change_form.html" %}
{% load static %}

{% block extrahead %}
    {{ block.super }} {# 保留Admin默认的JS/CSS资源 #}
    <script src="{% static 'app_name/js/custom.js' %}"></script>
{% endblock %}

这种方式既添加了自定义JS，又完整保留了Django Admin的默认样式与功能。

内容的提问来源于stack exchange，提问作者Parth Hero Bherwani