django admin前端多字段保存json|极客教程

django admin前端多字段保存json

在实际开发中，我们经常需要保存Json格式的数据，特别是在需要保存一些结构化数据时。Django自带的admin后台是非常强大的工具，但默认并不支持在前端一次保存多个相关字段的Json数据。本文将介绍如何在Django admin后台实现前端多字段保存Json数据的功能，让开发更加方便和高效。

背景

在实际开发中，我们经常遇到需要保存Json格式数据的情况。例如，我们有一个模型Product，它有两个字段name和options，其中options是一个Json字段，保存了产品的扩展信息。在Django的admin后台中，默认情况下是无法一次保存name和options字段的数据的。通常情况下，我们需要先保存name字段的数据，然后再通过修改页面进行options字段的保存，这样操作效率比较低。

实现方法

为了实现在Django admin后台一次保存多个相关字段的Json数据，我们可以通过自定义admin表单和视图来实现。具体步骤如下：

1. 创建自定义admin表单

首先，我们需要创建一个自定义的admin表单ProductAdminForm，继承自ModelForm，并定义所需要编辑的字段。

from django import forms
from django.contrib import admin
from .models import Product

class ProductAdminForm(forms.ModelForm):
    options = forms.JSONField()

    class Meta:
        model = Product
        fields = ['name', 'options']

2. 注册自定义admin表单

在admin.py文件中，我们需要注册自定义的admin表单ProductAdminForm。

from django.contrib import admin
from .models import Product
from .forms import ProductAdminForm

class ProductAdmin(admin.ModelAdmin):
    form = ProductAdminForm

admin.site.register(Product, ProductAdmin)

3. 修改前端页面

在页面上我们需要对options字段进行Json格式的编辑，可以使用第三方的Json编辑器，例如Ace Editor。在admin页面中加入相应的JavaScript代码，使得options字段可以通过Json编辑器进行编辑。

(function( $) {$ (document).ready(function() {
         $('#id_options'). css ('display', 'none'); var editor = ace.edit("editor"); editor.getSession().setMode("ace/mode/json"); editor.getSession().setValue(JSON.stringify($ ('#id_options').val()));

        editor.getSession().on('change', function() {
            $('#id_options').val(editor.getValue());
        });
    });
})(django.jQuery);

4. 保存Json数据

在保存数据时，我们需要对Json数据进行序列化处理，以保证数据的正确存储。在ProductAdmin中重写save_model方法，对options字段进行序列化处理。

from django.contrib import admin
from .models import Product

class ProductAdmin(admin.ModelAdmin):
    form = ProductAdminForm

    def save_model(self, request, obj, form, change):
        obj.options = json.loads(form.cleaned_data['options'])
        super().save_model(request, obj, form, change)

admin.site.register(Product, ProductAdmin)

通过以上步骤，我们可以实现在Django admin后台一次保存多个相关字段的Json数据。用户可以通过Json编辑器对options字段进行编辑，并一次性保存name和options字段的数据。