如何修改Django Action样式为独立按钮形式？

Django Admin默认会把批量Action渲染为<select>下拉框形式，若要改为多个独立<button>按钮，以下是两种可行方案：

方案一：自定义Admin模板覆盖Action区域 #

直接修改Admin的列表页模板，替换原有的下拉框渲染逻辑：

1. 复制并修改模板
   复制Django默认的change_list.html模板（路径为django/contrib/admin/templates/admin/change_list.html）到你项目的templates/admin/[你的应用名]/[你的模型名]/目录下，找到Action表单对应的代码块：

   <div class="actions">
       <label>{% trans "Action:" %}</label>
       <select name="action">
           {% for action in actions %}
               <option value="{{ action.name }}">{{ action.short_description }}</option>
           {% endfor %}
       </select>
       <button type="submit" class="button" title="{% trans "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">{% trans "Go" %}</button>
   </div>
   

   将其替换为按钮组结构：

   <div class="actions gap-2">
       {% for action in actions %}
           <button type="submit" name="action" value="{{ action.name }}" class="button">
               {{ action.short_description }}
           </button>
       {% endfor %}
   </div>
   

2. 在ModelAdmin中指定自定义模板
   在你的模型Admin类中配置自定义模板路径：

   from django.contrib import admin
   from .models import YourModel
   
   class YourModelAdmin(admin.ModelAdmin):
       change_list_template = "admin/your_app/your_model/change_list.html"
       # 其他Admin配置（如actions列表）
   
   admin.site.register(YourModel, YourModelAdmin)
   

方案二：JavaScript动态转换（无需修改模板） #

通过前端JS在页面加载后，将下拉框自动转换为独立按钮：

1. 编写自定义JS文件
   在项目的static/admin/js/目录下创建custom_actions.js，添加以下代码：

   document.addEventListener('DOMContentLoaded', () => {
       const actionSelect = document.querySelector('select[name="action"]');
       if (!actionSelect) return;
   
       const actionContainer = actionSelect.parentElement;
       // 移除原下拉框和"Go"按钮
       actionSelect.remove();
       const goBtn = actionContainer.querySelector('button[type="submit"]');
       goBtn?.remove();
   
       // 创建按钮容器
       const btnGroup = document.createElement('div');
       btnGroup.className = 'gap-2';
   
       // 遍历选项生成按钮
       Array.from(actionSelect.options).forEach(opt => {
           if (!opt.value) return; // 跳过默认空选项
           const btn = document.createElement('button');
           btn.type = 'submit';
           btn.name = 'action';
           btn.value = opt.value;
           btn.className = 'button';
           btn.textContent = opt.textContent;
           btnGroup.appendChild(btn);
       });
   
       actionContainer.appendChild(btnGroup);
   });
   

2. 在ModelAdmin中引入JS
   在Admin类的Media类中注册该JS文件：

   class YourModelAdmin(admin.ModelAdmin):
       actions = ['your_custom_action1', 'your_custom_action2']
       
       class Media:
           js = ('admin/js/custom_actions.js',)
   

关键注意事项 #

• 两种方案都依赖原表单的csrf_token和_selected_action隐藏字段（用于传递选中的模型ID），请勿删除表单核心结构。
• 自定义Action时，需确保short_description属性已正确设置，按钮会直接使用该文本作为显示内容。
• 样式可通过自定义CSS调整，示例中的gap-2类用于设置按钮间距，可根据项目样式框架替换或调整。

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