Django | admin 后台美化处理 JSONField

1 简单描述

在某些业务需求下,对于模型的某些字段,使用 JSONField 适配业务,但是这种字段在 django admin 下显示以及修改不是很直观和方便,所以这里动了念头,美化处理下 JSONField

环境如下:

  • python 3.5.2

  • django 1.11.1

  • postgresql 9.5.2

2 步骤以及代码示例说明

比如创建了一个模型

# -*- coding: utf-8 -*-

from django.db import models
from django.contrib.postgres.fields import JSONField

class Book(models.Model):
    """book model"""
    name = models.CharField('书籍名称', max_length=40, blank=True, default='')
    extra_data = JSONField('扩展数据', default={})
    create_time = models.DateTimeField('创建时间', auto_now_add=True)

    def __str__(self):
        return self.name

    class Meta:
        verbose_name = '书籍'
        verbose_name_plural = '书籍'

这里 extra_data 使用了 JSONField,如果不做任何处理,django admin 显示的样式如下:
图片描述

这种显示,查看,修改,搜索相对来说,不是很方便,后面就打算使用 jsoneditor 处理下,处理后的结果如下:图片描述

2.1 步骤

2.1.1 自定义 widget

# -*- coding: utf-8 -*-

import json

from django.forms import Widget
from django.utils.safestring import mark_safe


class JsonEditorWidget(Widget):
    """
    在 django  admin 后台中使用  jsoneditor 处理 JSONField

    TODO:有待改进, 这里使用 % 格式化,使用 format 会抛出 KeyError 异常
    """

    html_template = """
    <div id='%(name)s_editor_holder' style='padding-left:170px'></div>
    <textarea hidden readonly class="vLargeTextField" cols="40" id="id_%(name)s" name="%(name)s" rows="20">%(value)s</textarea>

    <script type="text/javascript">
        var element = document.getElementById('%(name)s_editor_holder');
        var json_value = %(value)s;

        var %(name)s_editor = new JSONEditor(element, {
            onChange: function() {
                var textarea = document.getElementById('id_%(name)s');
                var json_changed = JSON.stringify(%(name)s_editor.get()['Object']);
                textarea.value = json_changed;
            }
        });

        %(name)s_editor.set({"Object": json_value})
        %(name)s_editor.expandAll()
    </script>
    """

    def __init__(self, attrs=None):
        super(JsonEditorWidget, self).__init__(attrs)

    def render(self, name, value, attrs=None):
        if isinstance(value, str):
            value = json.loads(value)

        result = self.html_template % {'name': name, 'value': json.dumps(value),}
        return mark_safe(result)

2.1.2 在 admin.py 中引用

核心使用 formfield_overrides 设置

# -*- coding: utf-8 -*-

from django.contrib import admin
from django.contrib.postgres.fields import JSONField

from djexample.djtools import widgets
from . import models


class CommonAdminMixin(admin.ModelAdmin):
    """Common Admin Mixin"""
    list_max_show_all = 20
    list_per_page = 20

    formfield_overrides = {
        JSONField: {'widget': widgets.JsonEditorWidget}
    }

    class Media:
        from django.conf import settings
        static_url = getattr(settings, 'STATIC_URL')

        css = {
            'all': (static_url + 'jsoneditor.min.css', )
        }
        js = (static_url + 'jsoneditor-minimalist.min.js', )


@admin.register(models.Book)
class BookAdmin(CommonAdminMixin):
    """docstring for BookAdmin"""
    list_display = ['id', 'name']

就此 over,运行本地服务,就可以看到美化后的界面

2.3 项目仓库

例子可参考 示例代码

3 参考文章


黑月亮
点滴记录,步步成长

现实与完美之间

1.6k 声望
24 粉丝
0 条评论
推荐阅读
centos | 修改静态 IP
设置 Centos 为使用静态 IP1 修改网络配置 {代码...} 修改后的内容如下 {代码...} 2 重启网络服务 {代码...} 3 查看地址 {代码...} 参考来源:[链接]

青阳半雪阅读 1.8k评论 3

二、Django
Django 提示:本文根据b站黑马python课整理链接指引 =&gt; 黑马程序员python企业级开发项目-手把手从0到1开发《美多商城》MVT图解项目准备1.创建项目 {代码...} 2.创建应用 {代码...} 3.更换python解释器 {代码.....

玲小叮当阅读 1.1k

Mysql到TiDB迁移,双写数据库兜底方案
TiDB 作为开源 NewSQL 数据库的典型代表之一,同样支持 SQL,支持事务 ACID 特性。在通讯协议上,TiDB 选择与 MySQL 完全兼容,并尽可能兼容 MySQL 的语法。因此,基于 MySQL 数据库开发的系统,大多数可以平滑迁...

京东云开发者阅读 993

封面图
三、djanjo
Django 提示:本文根据b站黑马python课整理链接指引 =&gt; 黑马程序员python企业级开发项目-手把手从0到1开发《美多商城》视图介绍和项目准备视图介绍视图就是应用中views.py文件中的函数视图的第一个参数必须为H...

玲小叮当阅读 902

一、Django
Django 提示:本文根据b站黑马python课整理链接指引 =&gt; 黑马程序员python企业级开发项目-手把手从0到1开发《美多商城》一、Django介绍1.1 MVT模式M全拼为Model,与MVC中的M功能相同,负责和数据库交互,进行数...

玲小叮当阅读 795

Django笔记二十二之多数据库操作
在第十篇笔记的时候,简单介绍过 using() 的使用方法,多个数据库就是通过 using(db_alias) 的方式来来指定选中的数据库,这里介绍一下同步库表结构时候的操作。

Hunter阅读 767

封面图
Django笔记十三之select_for_update等选择和更新等相关操作
本篇笔记将介绍 update 和 create 的一些其他用法,目录如下:get_or_createupdate_or_createselect_for_updatebulk_createbulk_update1、get_or_create前面我们介绍过 get() 和 create() 的用法,那么 get_or_cr...

Hunter阅读 714

封面图

现实与完美之间

1.6k 声望
24 粉丝
宣传栏