Django-admin如何在Save按钮旁添加同排自定义按钮
你当前的实现是在默认提交按钮渲染完成({{ block.super }})之后,新增了一个独立的.submit-row容器,Django Admin默认将.submit-row设置为块级元素,自带上下间距,因此自定义按钮会单独显示在默认按钮下方。可以通过以下两种方案解决:
方案1(推荐:兼容性强)
直接重写整个提交行容器,将自定义按钮插入到默认按钮的同一容器内,无需额外调整样式,适配性最高:
{% extends 'admin/custominlines/change_form.html' %} {% load i18n admin_urls %} {% block submit_buttons_bottom %} <div class="submit-row"> {# 保留Django Admin默认的所有操作按钮 #} {% if show_save %}<input type="submit" value="{% translate 'Save' %}" class="default" name="_save">{% endif %} {% if show_save_and_close %}<input type="submit" value="{% translate 'Save and close' %}" name="_saveandclose">{% endif %} {% if show_save_and_continue %}<input type="submit" value="{% if can_change %}{% translate 'Save and continue editing' %}{% else %}{% translate 'Save and view' %}{% endif %}" name="_continue">{% endif %} {% if show_close %}<a href="{% url opts|admin_urlname:'changelist' %}" class="closelink">{% translate 'Close' %}</a>{% endif %} {% if show_delete_link and original %} {% url opts|admin_urlname:'delete' original.pk|admin_urlquote as delete_url %} <a href="{% add_preserved_filters delete_url %}" class="deletelink">{% translate "Delete" %}</a> {% endif %} {# 插入自定义业务按钮 #} {% if request.GET.edit %} {% for obj in transitions %} <input type="submit" value="{{ obj }}" name="{{ obj }}"> {% endfor %} {% endif %} </div> {% endblock %}
方案2(快速调整:不改动原有逻辑)
如果不想重写整个提交行代码,可以给新增的.submit-row加内联样式,消除块级元素的默认换行、间距影响:
{% extends 'admin/custominlines/change_form.html' %} {% load i18n %} {% block submit_buttons_bottom %} {{ block.super }} {% if request.GET.edit %} <div class="submit-row" style="border: none;margin: -40px 0 0 0;padding: 0;float: right;clear: none;"> {% for obj in transitions %} <input type="submit" value="{{ obj }}" name="{{ obj }}"> {% endfor %} </div> {% endif %} {% endblock %}
注:样式中的margin-top数值可根据你的Admin主题实际显示效果微调,适配不同的间距规格。
内容的提问来源于stack exchange,提问作者Lutaaya Huzaifah Idris
相关产品推荐
相关产品推荐

