Developer 2025 🎇限时优惠进行中,现在购买立即享受

现在购买

simpleui 增加修改自定义按钮、action

avatar社区小助手
7月29日4.0k次阅读

自定义按钮&Action

介绍

需要在2.1.2以上版本生效

django admin 默认提供了自定义按钮的支持,但是样式、图标均不可自定义,simpleui在django admin 自定义action的基础上增加了样式、图标、按钮类型自定义。

例子

    @admin.register(Employe)
class EmployeAdmin(admin.ModelAdmin):
    list_display = ('id', 'name', 'gender', 'idCard', 'phone', 'birthday', 'department', 'enable', 'create_time')
   
    # 增加自定义按钮
    actions = ['make_copy', 'custom_button']

    def custom_button(self, request, queryset):
        pass

    # 显示的文本,与django admin一致
    custom_button.short_description = '测试按钮'
    # icon,参考element-ui icon与https://fontawesome.com
    custom_button.icon = 'fas fa-audio-description'

    # 指定element-ui的按钮类型,参考https://element.eleme.cn/#/zh-CN/component/button
    custom_button.type = 'danger'

    # 给按钮追加自定义的颜色
    custom_button.style = 'color:black;'

    def make_copy(self, request, queryset):
        pass
    make_copy.short_description = '复制员工'

该配置与原生admin兼容。

字段参数

字段 说明
icon 按钮图标,参考https://element.eleme.cn/#/zh-CN/component/icon与https://fontawesome.com,把class 复制进来即可
type 按钮类型,参考:https://element.eleme.cn/#/zh-CN/component/button
style 自定义css样式
confirm 弹出确认框,在3.4或以上版本中生效

confirm 例子

    def message_test(self, request, queryset):
        messages.add_message(request, messages.SUCCESS, '操作成功123123123123')
        
    # 给按钮增加确认
    message_test.confirm = '你是否执意要点击这个按钮?'

链接按钮

在2.9或以上版本中生效

字段 说明
action_type 按钮动作类型,0=当前页内打开,1=新tab打开,2=浏览器tab打开
action_url 按钮访问链接

demo:

  # 增加自定义按钮
    actions = ['custom_button']

    def custom_button(self, request, queryset):
        pass

    # 显示的文本,与django admin一致
    custom_button.short_description = '测试按钮'
    # icon,参考element-ui icon与https://fontawesome.com
    custom_button.icon = 'fas fa-audio-description'

    # 指定element-ui的按钮类型,参考https://element.eleme.cn/#/zh-CN/component/button
    custom_button.type = 'danger'

    # 给按钮追加自定义的颜色
    custom_button.style = 'color:black;'

    # 链接按钮,设置之后直接访问该链接
    # 3中打开方式
    # action_type 0=当前页内打开,1=新tab打开,2=浏览器tab打开
    # 设置了action_type,不设置url,页面内将报错
    # 设置成链接类型的按钮后,custom_button方法将不会执行。

    custom_button.action_type = 0
    custom_button.action_url = 'http://www.baidu.com'
发布评论
登录后发表内容
0个评论