django simpleui 的进阶用法，挂载自定义js，实现自定义功能

最新推荐文章于 2025-01-06 15:49:52 发布

等。。

最新推荐文章于 2025-01-06 15:49:52 发布

阅读量1.1k

点赞数 2

分类专栏： Python Django 文章标签： javascript django 前端

原文链接：https://simpleui.72wo.com/topic/1266/

版权

Django 同时被 2 个专栏收录

46 篇文章

订阅专栏

Python

8 篇文章

订阅专栏

这篇博客介绍了如何在Django admin中挂载自定义JS，展示了一个实例：通过点击狗的头像在弹窗中显示大图。详细步骤包括在`DogAdmin`类中定义`img`方法生成带点击事件的头像HTML，并挂载`custom.js`来实现图片放大功能。此外，还展示了如何挂载CSS和CDN资源。这个例子展示了Django admin的可扩展性，可以用于增强后台管理界面的各种交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在admin类里面挂载自定义js

@admin.register(Dog)
class DogAdmin(admin.ModelAdmin):
    list_display = ('img', 'name', 'age', 'operate')
    list_display_links = ('name',)

    # 在list页面显示头像
    @admin.display(description='头像', ordering='name')
    def img(self, obj):
        # 在custom.js里面实现了show_pic函数，onclick进行调用
        div = f"""<img id='icon_{obj.id}' src='{obj.icon.url}' 
        width='32px' οnclick='show_pic("{obj.icon.url})"' />"""
        return mark_safe(div)
    # 挂载自定义的js，css也可以挂，可以挂载本地文件，也可以挂载网络文件
    class Media:
        js = ('js/custom.js',
              #   也可以挂载cdn文件，这里仅示例
              #  'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js',
             )

在static/js/custom.js 的函数


function show_pic(icon_url) {
    let msg_html = `<img src="${icon_url}" width="400px" />`
    // $alert接收3个参数，data，title，options
    // options使用案例可以参考https://element.eleme.cn/#/zh-CN/component/message-box#options
    self.parent.app.$alert(msg_html, '这里是title', {
        dangerouslyUseHTMLString: true
    })
}