求助：Django Admin为字号字段添加±增减按钮的实现方案

1. 创建自定义Widget #

在你的app目录下新建widgets.py，编写自定义Widget来渲染带按钮的输入框结构：

from django.forms.widgets import TextInput
from django.utils.safestring import mark_safe

class NumberIncrementWidget(TextInput):
    def render(self, name, value, attrs=None, renderer=None):
        input_html = super().render(name, value, attrs, renderer)
        button_html = f'''
        <div class="input-group" style="display:flex; gap:4px; align-items:center;">
            <button type="button" class="btn btn-sm btn-decrement" data-input-id="{attrs['id']}">-</button>
            {input_html}
            <button type="button" class="btn btn-sm btn-increment" data-input-id="{attrs['id']}">+</button>
        </div>
        '''
        return mark_safe(button_html)

2. 编写数值增减逻辑的JavaScript #

在项目静态文件目录（如static/admin/js/）下新建number_increment.js：

document.addEventListener('DOMContentLoaded', function() {
    // 处理减按钮点击
    document.querySelectorAll('.btn-decrement').forEach(btn => {
        btn.addEventListener('click', function() {
            const input = document.getElementById(this.dataset.inputId);
            if (!input) return;
            
            const valueMatch = input.value.match(/^(\d+)px$/);
            if (valueMatch) {
                let num = parseInt(valueMatch[1], 10);
                if (num > 1) { // 可根据需求调整数值下限
                    num -= 1;
                    input.value = `${num}px`;
                }
            }
        });
    });

    // 处理加按钮点击
    document.querySelectorAll('.btn-increment').forEach(btn => {
        btn.addEventListener('click', function() {
            const input = document.getElementById(this.dataset.inputId);
            if (!input) return;
            
            const valueMatch = input.value.match(/^(\d+)px$/);
            if (valueMatch) {
                let num = parseInt(valueMatch[1], 10);
                num += 1;
                input.value = `${num}px`;
            }
        });
    });
});

3. 在Admin类中配置使用 #

修改app目录下的admin.py，指定目标字段使用自定义Widget并引入JS：

from django.contrib import admin
from .models import YourModel  # 替换为你的实际模型类
from .widgets import NumberIncrementWidget

@admin.register(YourModel)
class YourModelAdmin(admin.ModelAdmin):
    class Media:
        js = ('admin/js/number_increment.js',)

    def formfield_for_dbfield(self, db_field, **kwargs):
        if db_field.name == 'landing_page_btn_text_size':
            kwargs['widget'] = NumberIncrementWidget()
        return super().formfield_for_dbfield(db_field, **kwargs)

补充说明 #

• 若需要调整按钮样式，可在静态文件中添加自定义CSS并在Media类中引入
• JS中的数值下限（当前限制为大于1）可根据客户需求修改
• 生产环境需运行python manage.py collectstatic收集静态文件

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