如何通过Django Admin将JSONField转为可编辑的动态字段？

问题分析 #

你的代码存在几个核心问题：

• 模型的__str__方法直接返回字典对象，Django Admin无法正确解析显示
• 新增实例时，instance.config为空字典，导致没有生成任何可编辑字段
• 表单save方法存在未定义变量的错误，且未处理用户新增的字段
• 冗余的self.fields.pop('config', None)代码（Meta中fields为空，该字段本就不在表单内）

修复后的完整代码 #

1. 模型修改（models.py）

import json
from django.db import models

class DynamicModel(models.Model):
    # 设置默认空字典，避免None值导致的逻辑错误
    config = models.JSONField(default=dict)

    def __str__(self):
        # 将字典转为格式化JSON字符串，Admin显示更友好
        return json.dumps(self.config, indent=2)

2. 表单修改（forms.py）

from django import forms
from .models import DynamicModel

class DynamicModelForm(forms.ModelForm):
    class Meta:
        model = DynamicModel
        fields = []  # 不渲染默认字段，全部动态生成

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 为现有JSON数据生成可编辑字段
        json_data = self.instance.config or {}
        for key, value in json_data.items():
            self.fields[key] = forms.CharField(initial=value, required=False)
            self.fields[key].label = key.capitalize()
            self.fields[key].widget.attrs.update({'style': 'display:block; margin-bottom:10px;'})
        
        # 新增实例时，默认提供3个空字段供用户输入，支持键值对格式（如"age:25"）
        if self.instance.pk is None:
            for i in range(3):
                field_name = f'new_field_{i}'
                self.fields[field_name] = forms.CharField(required=False)
                self.fields[field_name].label = f'New Field {i+1}'
                self.fields[field_name].widget.attrs.update({'placeholder': '输入格式：键:值 或直接输入值'})

    def save(self, commit=True):
        instance = super().save(commit=False)
        config = {}
        
        # 遍历所有表单字段，收集非空值
        for field_name, value in self.cleaned_data.items():
            if value:
                # 处理新增字段：支持键值对分割
                if field_name.startswith('new_field_'):
                    if ':' in value:
                        key, val = value.split(':', 1)
                        config[key.strip()] = val.strip()
                    else:
                        # 无冒号时，自动生成字段名
                        config[f'custom_{field_name}'] = value
                else:
                    # 保留原有字段的修改
                    config[field_name] = value
        
        instance.config = config
        if commit:
            instance.save()
        return instance

3. Admin配置（admin.py）

from django.contrib import admin
from .models import DynamicModel
from .forms import DynamicModelForm

class DynamicModelAdmin(admin.ModelAdmin):
    form = DynamicModelForm
    list_display = ['get_config_display']

    # 自定义列表页显示格式
    def get_config_display(self, obj):
        return obj.__str__()
    get_config_display.short_description = '配置内容'

    # 可选：添加JS实现动态新增字段功能
    class Media:
        js = ('admin/js/dynamic_fields.js',)

admin.site.register(DynamicModel, DynamicModelAdmin)

4. 可选：动态添加字段的JS（static/admin/js/dynamic_fields.js）

如果需要让用户点击按钮动态新增输入框，创建该JS文件：

document.addEventListener('DOMContentLoaded', function() {
    const addButton = document.createElement('button');
    addButton.textContent = '新增字段';
    addButton.type = 'button';
    addButton.style.marginTop = '10px';
    
    const formContainer = document.querySelector('.form-row').parentNode;
    formContainer.appendChild(addButton);
    
    let fieldCount = 3; // 对应表单默认的3个空字段

    addButton.addEventListener('click', function() {
        const fieldName = `new_field_${fieldCount}`;
        const fieldRow = document.createElement('div');
        fieldRow.className = 'form-row';

        const label = document.createElement('label');
        label.textContent = `新增字段 ${fieldCount+1}`;
        label.htmlFor = `id_${fieldName}`;

        const input = document.createElement('input');
        input.type = 'text';
        input.name = fieldName;
        input.id = `id_${fieldName}`;
        input.placeholder = '输入格式：键:值 或直接输入值';
        input.style.display = 'block';
        input.style.marginBottom = '10px';

        fieldRow.appendChild(label);
        fieldRow.appendChild(input);
        formContainer.insertBefore(fieldRow, addButton);

        fieldCount++;
    });
});

功能说明 #

• 编辑已有实例时，JSON中的每个键会自动转为独立的可编辑字段，修改后同步回JSONField
• 新增实例时，默认显示3个空字段，支持输入键:值格式自动拆分，或直接输入值生成自定义字段
• 可选的JS功能允许用户动态添加更多输入框
• 列表页显示格式化后的JSON内容，更易阅读

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