如何在Django Admin中根据模型字段值展示对应图标

这个需求完全可以实现，可同时覆盖Django Admin的列表页、编辑页场景，兼容PNG和webfont两种图标格式，实现方案如下：

先定义eventId和对应图标的映射关系，可根据自身业务调整映射值：

# 可定义在模型文件或Admin类所在文件中
EVENT_ICON_MAP = {
    "1": {
        "png": "/static/icons/event_1.png", # 替换为你的PNG图标静态路径
        "webfont": "fa-calendar-check" # 替换为你的webfont图标类名
    },
    "2": {
        "png": "/static/icons/event_2.png",
        "webfont": "fa-alarm-clock"
    }
    # 其余eventId对应的图标配置按需补充
}

在你的Events模型对应的Admin类中，新增自定义展示字段，分两种图标格式实现：

1.1 PNG格式实现 #

from django.contrib import admin
from django.utils.html import format_html
from .models import Events

@admin.register(Events)
class EventsAdmin(admin.ModelAdmin):
    # 列表页显示字段，加入自定义的event_icon字段
    list_display = ("eventId", "name", "event_icon", "euuid", "created")

    def event_icon(self, obj):
        icon_config = EVENT_ICON_MAP.get(obj.eventId)
        if not icon_config:
            return "-"
        # 可自行调整style属性修改图标尺寸、对齐方式
        return format_html(
            '<img src="{}" style="width:24px;height:24px;vertical-align:middle;" alt="事件图标"/>',
            icon_config["png"]
        )
    # 自定义字段的列表表头名称
    event_icon.short_description = "事件图标"

1.2 Webfont格式实现 #

仅需修改event_icon方法的返回逻辑即可，注意需提前将webfont对应的样式文件放入静态目录：

def event_icon(self, obj):
    icon_config = EVENT_ICON_MAP.get(obj.eventId)
    if not icon_config:
        return "-"
    # 可自行调整style属性修改图标大小、颜色、对齐方式
    return format_html(
        '<i class="{}" style="font-size:20px;color:#165DFF;vertical-align:middle;"></i>',
        icon_config["webfont"]
    )

# 在EventsAdmin类中加入Media配置引入webfont样式
class Media:
    css = {
        "all": ("/static/css/your_webfont_style.min.css",)
    }

2.1 只读展示 #

将自定义的event_icon字段加入编辑页字段配置，并设为只读即可：

@admin.register(Events)
class EventsAdmin(admin.ModelAdmin):
    list_display = ("eventId", "name", "event_icon", "euuid", "created")
    # 编辑页显示字段
    fields = ("eventId", "name", "event_icon", "euuid", "created")
    # 自定义字段必须设为只读，否则Django会尝试将其作为表单字段处理报错
    readonly_fields = ("event_icon", "euuid", "created")

    # event_icon方法同列表页配置，无需修改

2.2 实时联动展示（修改eventId时图标自动切换） #

如果需要编辑eventId时实时更新图标，仅需在上述Media配置中新增自定义JS文件，监听eventId输入框的change事件，根据输入值匹配对应图标渲染即可。

内容的提问来源于stack exchange，提问作者sokolata