JsonEditor 与 Django Admin 集成 [英] JsonEditor integration with Django Admin

问题描述

我正在努力将 JSONEditor 集成到 Django 管理员中.我的模型中有一个字段使用 Postgres JSON，并且这个库中的树编辑器非常完美.

models.py

类可执行文件(models.Model):""" 为了这个问题，简化模型."""配方= JSONField(空=真，空白=真)

我已经取得了不错的进展(我认为)将 JSONEditor 库集成到 Django Admin 中适当的创建/编辑屏幕中.数据在加载时显示正确，但由于某种原因，当我在 JSONEditorWidget 中进行编辑时，未保存更改.我确定我需要处理一些 save 覆盖，或者我遗漏了一些明显的东西，但我真的不知道从哪里开始.

admin.py

导入json从 django 导入表单，utils从 django.contrib 导入管理员从 .models 导入可执行文件类 JSONEditorWidget(forms.Widget):html_template = """<div id='%(name)s_editor_holder'></div><脚本类型="文本/javascript">变量选项 = {模式":树"，搜索":真};var %(name)s_editor = new JSONEditor(container, options);var json = %(值)s%(name)s_editor.set(json);%(name)s_editor.expandAll();var json = %(name)s_editor.get(json);</脚本><textarea readonly class="vLargeTextField" cols="40" id="id_%(name)s" name="%(name)s" rows="2" height="20px">%(value)s</文本区域>"""def __init__(self, attrs=None, 格式=None, 默认值=None):self.formats = 格式self.defaults = 默认值超级(JSONEditorWidget，自我).__init__(attrs)def render(self, name, value, attrs=None):if isinstance(value, basestring): # 编辑现有实例值 = json.loads(值)结果 = self.html_template % {名称":名称，价值":json.dumps(价值)}返回 utils.safestring.mark_safe(结果)类 ExecutableForm(forms.ModelForm):recipe = forms.CharField(widget=JSONEditorWidget()) # Kwargs 在这里?元类:模型 = 可执行文件字段 = '__all__'类媒体:css = {'全部': ('http://www.jsoneditoronline.org/app.min.css',) # TEMP}js = ('http://www.jsoneditoronline.org/app.min.js', # TEMP)类 ExecutableAdmin(admin.ModelAdmin):模型 = 可执行文件表格 = 可执行表格字段 = (('request', 'status'), 'recipe')admin.site.register(Executable, ExecutableAdmin)

解决方案

我的 Django 1.10.2, jsoneditor#^5.5.9, Postgres 9.5 解决方案:

models.py

从 django.contrib.postgres.fields 导入 JSONField类消费者(模型.模型):数据 = JSONField(默认 = 字典，db_index = True)

admin.py:

从 django 导入表单从 django.contrib 导入管理员从 django.utils.safestring 导入 mark_safe从 django.template.loader 导入 render_to_string从 .models 进口消费者类 JSONEditorWidget(forms.Widget):模板名称 = 'jsoneditor.html'def render(self, name, value, attrs=None):上下文 = {数据":值，名称":名称}return mark_safe(render_to_string(self.template_name, context))类消费者表单(forms.ModelForm):元类:模型 = 消费者字段 = '__all__'小部件 = {数据":JSONEditorWidget()}类媒体:css = {'all': ('jsoneditor/dist/jsoneditor.min.css',) }js = ('jsoneditor/dist/jsoneditor.min.js', )类消费者管理员(admin.ModelAdmin):list_display = ['pk']模型 = 消费者表格 = 消费者表格admin.site.register(消费者，ConsumerAdmin)

jsoneditor.html:

<div id="{{ name }}_editor"></div><textarea cols="40" id="id_{{ name }}" name="{{ name }}" rows="10" required="" style="display: none">{{ data }}</textarea><脚本>console.log('jsoneditor.html');var container = document.getElementById("{{ name }}_editor");变量选项 = {模式:['代码'，'树']，搜索:真，onChange: 函数 () {var json = editor.get();document.getElementById("id_{{ name }}").value=JSON.stringify(json);}};var editor = new JSONEditor(container, options);var json = {{ 数据|安全 }};编辑器.set(json);</脚本>

<块引用>

块引用使用 StackEdit 编写.

I am working on integrating JSONEditor into the Django admin. There is one field in my model that uses the Postgres JSON and the Tree editor in this library is perfect.

models.py

class Executable(models.Model):
    """ Simplified model for sake of the question."""

    recipe = JSONField(null=True, blank=True)

I've made decent progress (I think) integrating the JSONEditor library within the appropriate create/edit screen in the Django Admin. The data is displayed correctly upon loading but for some reason when I make edits within the JSONEditorWidget the changes are not saved. I'm sure there is some save override that I need to work on, or that I'm missing something obvious, but I'm really not sure where to go from here.

admin.py

import json
from django import forms, utils
from django.contrib import admin

from .models import Executable


class JSONEditorWidget(forms.Widget):
    html_template = """
        <div id='%(name)s_editor_holder'></div>
        <script type="text/javascript">
                var options = {
                    "mode": "tree",
                    "search": true
                };
                var %(name)s_editor = new JSONEditor(container, options);
                var json = %(value)s
                %(name)s_editor.set(json);
                %(name)s_editor.expandAll();

                var json = %(name)s_editor.get(json);
        </script>
        <textarea readonly class="vLargeTextField" cols="40" id="id_%(name)s" name="%(name)s" rows="2" height="20px">%(value)s</textarea>
    """
    def __init__(self, attrs=None, formats=None, defaults=None):
        self.formats = formats
        self.defaults = defaults
        super(JSONEditorWidget, self).__init__(attrs)

    def render(self, name, value, attrs=None):
        if isinstance(value, basestring):  # Edit existing instance
            value = json.loads(value)
        result = self.html_template % {
            'name': name,
            'value': json.dumps(value)
        }
        return utils.safestring.mark_safe(result)


class ExecutableForm(forms.ModelForm):
    recipe = forms.CharField(widget=JSONEditorWidget())    # Kwargs here?

    class Meta:
        model = Executable
        fields = '__all__'

    class Media:
        css = {
            'all': ('http://www.jsoneditoronline.org/app.min.css',)  # TEMP
        }
        js = (
            'http://www.jsoneditoronline.org/app.min.js',   # TEMP
            )


class ExecutableAdmin(admin.ModelAdmin):
    model = Executable
    form = ExecutableForm
    fields = (('request', 'status'), 'recipe')


admin.site.register(Executable, ExecutableAdmin)

解决方案

My solution for Django 1.10.2, jsoneditor#^5.5.9, Postgres 9.5:

models.py

from django.contrib.postgres.fields import JSONField

class Consumer(models.Model):
    data = JSONField(default=dict, db_index=True)

admin.py:

from django import forms
from django.contrib import admin
from django.utils.safestring import mark_safe
from django.template.loader import render_to_string

from .models import Consumer


class JSONEditorWidget(forms.Widget):

    template_name = 'jsoneditor.html'

    def render(self, name, value, attrs=None):
        context = {
            'data': value,
            'name': name
        }

        return mark_safe(render_to_string(self.template_name, context))


class ConsumerForm(forms.ModelForm):

    class Meta:
        model = Consumer
        fields = '__all__'
        widgets = {
            'data': JSONEditorWidget()
        }

    class Media:
        css = { 'all': ('jsoneditor/dist/jsoneditor.min.css',) }
        js = ('jsoneditor/dist/jsoneditor.min.js', )


class ConsumerAdmin(admin.ModelAdmin):
    list_display = ['pk']
    model = Consumer
    form = ConsumerForm

admin.site.register(Consumer, ConsumerAdmin)

jsoneditor.html:

<div id="{{ name }}_editor"></div>

<textarea cols="40" id="id_{{ name }}" name="{{ name }}" rows="10" required="" style="display: none">{{ data }}</textarea>


<script>
    console.log('jsoneditor.html');
    var container = document.getElementById("{{ name }}_editor");

    var options = {
        modes: ['code', 'tree'],
        search: true,

        onChange: function () {
            var json = editor.get();
            document.getElementById("id_{{ name }}").value=JSON.stringify(json);
        }
    };

    var editor = new JSONEditor(container, options);
    var json = {{ data|safe }};
    editor.set(json);
</script>

Blockquote Written with StackEdit.

这篇关于JsonEditor 与 Django Admin 集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！