Django Admin中基于Ajax的站点标签联动下拉菜单实现需求

实现方案 #

以下是完整的实现步骤，分为后端API开发、路由配置和前端交互三个部分：

1. 编写后端API视图

创建一个仅允许管理员访问的视图，根据传入的Station ID返回对应的Tag列表：

# your_app/views.py
from django.http import JsonResponse
from django.contrib.admin.views.decorators import staff_member_required
from .models import Station, Tag

@staff_member_required
def get_station_tags(request):
    station_id = request.GET.get('station_id')
    if not station_id:
        return JsonResponse({'tags': []})
    
    try:
        station = Station.objects.get(id=station_id)
        # 返回Tag的ID和名称，可根据需求调整字段
        tags = Tag.objects.filter(station=station).values('id', 'name')
        return JsonResponse({'tags': list(tags)})
    except Station.DoesNotExist:
        return JsonResponse({'tags': []})

2. 配置URL路由

将上述视图映射到Admin相关的URL路径：

# your_app/urls.py（或项目根urls.py）
from django.urls import path
from .views import get_station_tags

urlpatterns = [
    # 其他已有路由
    path('admin/get-station-tags/', get_station_tags, name='get_station_tags'),
]

3. 自定义Admin模板添加前端交互

以Tag编辑页为例，自定义模板并添加JavaScript逻辑，监听Station下拉框变化事件，异步加载并渲染Tag列表：

1. 创建自定义模板文件 templates/admin/your_app/tag/change_form.html：

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

{% block extrajs %}
{{ block.super }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const stationSelect = document.getElementById('id_station');
    const tagContainer = document.getElementById('tag-container');

    // 加载指定站点的标签
    function loadTags(stationId) {
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
        fetch(`/admin/get-station-tags/?station_id=${stationId}`, {
            headers: {
                'X-CSRFToken': csrfToken
            }
        })
        .then(response => response.json())
        .then(data => {
            tagContainer.innerHTML = '';
            if (data.tags.length > 0) {
                const tagList = document.createElement('ul');
                data.tags.forEach(tag => {
                    const listItem = document.createElement('li');
                    listItem.textContent = tag.name;
                    // 添加标签编辑链接（可选）
                    const editLink = document.createElement('a');
                    editLink.href = `/admin/your_app/tag/${tag.id}/change/`;
                    editLink.textContent = ' (编辑)';
                    editLink.target = '_blank';
                    listItem.appendChild(editLink);
                    tagList.appendChild(listItem);
                });
                tagContainer.appendChild(tagList);
            } else {
                tagContainer.textContent = '该站点暂无关联标签';
            }
        })
        .catch(err => console.error('标签加载失败:', err));
    }

    // 页面加载时，若已有选中的站点则自动加载标签
    if (stationSelect.value) {
        loadTags(stationSelect.value);
    }

    // 监听站点下拉框变化
    stationSelect.addEventListener('change', function() {
        loadTags(this.value);
    });
});
</script>
{% endblock %}

{% block after_field_sets %}
{{ block.super }}
<!-- 用于显示标签的容器 -->
<div id="tag-container" style="margin-top: 15px; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
    <!-- 标签将通过JS动态渲染 -->
</div>
{% endblock %}

2. 在Tag的Admin配置中指定使用该模板：

# your_app/admin.py
from django.contrib import admin
from .models import Tag

@admin.register(Tag)
class TagAdmin(admin.ModelAdmin):
    change_form_template = 'admin/your_app/tag/change_form.html'
    # 其他Admin配置（如fields、list_display等）
    fields = ('name', 'station')

关键注意事项

• 权限控制：使用staff_member_required确保只有管理员能访问API接口，避免未授权访问。
• CSRF保护：前端请求中携带CSRF令牌，符合Django的安全机制。
• 字段扩展：可根据需求在API中返回更多Tag字段（如创建时间、slug等），并在前端渲染。
• 场景适配：如果是在Station的Admin页面（含Tag inline），可调整模板为Station的change_form.html，逻辑类似但需针对inline区域进行更新。

内容的提问来源于stack exchange，提问作者Anupama V Iyengar