Django admin实现TextField字段changelist页面换行、空格正常显示

目录
  • 问题背景
  • 原因
  • 解决方案
    • 使用list_editable
    • 使用format_html--满足只读需求

问题背景

在Django后台的使用admin view绑定model后，可以很方便的通过网页对底层的数据表进行增删查改操作。

在实际工作中有一些数据字段会存储了json或者其他包含换行符、空格符的文本内容，这些文本内容在记录编辑详情页是能正常显示换行、空格的，如下：

但是在changelist页面则会省略所有空格、换行，导致可读性较差，如下：

原因

究其原因，其实是因为在编辑详情页面，存放文本的标签是textarea，在该标签中的文本内容并不会忽略换行、空格字符，通过使用浏览器开发者工具可以看到如下代码：

<textarea name="lang_content" cols="40" rows="10" class="vLargeTextField" required="" id="id_lang_content">{
  "en": "this is a content",
  "zh-hant": "這是默認正文內容"
}</textarea>

而在changelist页面，默认使用的是直接就是td标签，即直接放入一个表单元格之中，这时根据HTML标准会将所有连续的空格、换行符均处理为单个空格：

<td class="field-lang_content">{
  "en": "this is a content",
  "zh-hant": "這是默認正文內容"
}</td>

解决方案

以一个简单的test_record table的admin view为例。

表结构：

CREATE TABLE `test_table` (
  `id` bigint(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '自增主键',
  `title` varchar(255) NOT NULL DEFAULT '0',
  `content` varchar(255) NOT NULL,
  `lang_content` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4

models.py:

# coding=utf-8
from django.db import models

class TestRecord(models.Model):
    class Meta:
        db_table = "test_record"
        db_tablespace = 'test_db'

    id = models.AutoField(primary_key=True, verbose_name="id")
    title = models.CharField(max_length=255)
    content = models.CharField(max_length=255)
    lang_content = models.TextField()

admin.py

from django.contrib import admin
from django.utils.html import format_html

from .models import TestRecord

@admin.register(TestRecord)
class TestRecordAdmin(admin.ModelAdmin):
    list_display = ('id', 'title', 'content', 'lang_content', 'lang_content_view')

使用list_editable

将lang_content放入list_editable，如下：

 list_editable = ('lang_content', )

这样在changelist页面，将使用textarea标签修饰lang_content内容，于是空格、换行符就能够正确显示：

同时在changelist页面将可以直接编辑lang_content字段，无法满足只希望该字段在changelist页面可读，而不可编辑的需求，相当于是把编辑功能和显示功能强制绑定无法分离，缺乏灵活性。

使用format_html--满足只读需求

在django.utils.html中提供了一个format_html函数，该函数可用于将所有输出内容按HTML格式转义渲染。

于是可以通过在admin class中定义一个专门负责展示lang_content内容的实例方法，将lang_content内容用pre或textarea标签包裹，而后经过format_html转义后返回。此方法更加灵活，还可通过调整标签各属性定制输出效果--比如设置高度(rows)、宽度(cols)等。

代码如下所示

    def lang_content_view(self, obj):
        # return format_html('<textarea cols=40 rows={} readonly>{}</textarea>', obj.lang_content.count('\n')+1, obj.lang_content)
        return format_html('<pre>{}</pre>', obj.lang_content)

显示效果如下：

对应网页代码如下：

<td class="field-lang_content_view"><pre>{
  "en": "this is a content",
  "zh-hant": "這是默認正文內容"
}</pre></td>

到此这篇关于Django admin实现TextField字段changelist页面换行、空格正常显示的文章就介绍到这了,更多相关Django changelist 正常显示内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Django admin.py 在修改/添加表单界面显示额外字段的方法

    问题描述: 我有个blogextra表继承自blog,现在我想在blog的admin管理change界面显示对应的blogextra字段 解决方法: 可以使用admin.py的inline内联方法 代码: models.py from django.db import models # Create your models here. class Blog(models.Model): Name = models.CharField(max_length=350) def __unicode__

  • django模型中的字段和model名显示为中文小技巧分享

    简单方法: models.py 复制代码 代码如下: class IceCreamBar(models.Model):     title = models.CharField(max_length=200,db_index=True,verbose_name="名称")         shell = models.CharField(max_length=100,verbose_name='外皮')         filling = models.CharField(max_le

  • Django 实现图片上传和显示过程详解

    第1章 新建工程和创建app 新建工程和创建app就不用贴出来了,我这里是测试图片上传的功能能否实现,所以项目都是新的,正常在以有的app下就可以 第2章 模型层: 2.1创建数据库 from django.dbimport models # Create your models here. class User(models.Model): name= models.CharField(max_length=50) # upload_to 指定上传文件位置 # 这里指定存放在img/ 目录下

  • django 前端页面如何实现显示前N条数据

    这个涉及到的知识点是django数据库查询问题,我们可以在view.py文件中操作 blog_list = models.Blog.objects.all()[:3] 这是选取数据库的前三条数据 补充知识:django 数据库查询-如何获取指定范围的数据 检索对象 __exact 精确等于 like 'aaa' __iexact 精确等于 忽略大小写 ilike 'aaa' __contains 包含 like '%aaa%' __icontains 包含 忽略大小写 ilike '%aaa%'

  • Django实现将一个字典传到前端显示出来

    后台代码: fielddict = {'name':'张三','age':18} return render(request,'test.html',{'field':fielddict}) 前端代码: {% for m,n in field.items %} {{ m }}:{{ n }} {% endfor %} 效果图: 如果在前端想根据键取出值: {{field.name}} {{field.age}} 补充知识:Django model转字典的几种方法 平常的开发过程中不免遇到需要把m

  • Django框架实现分页显示内容的方法详解

    本文实例讲述了Django框架实现分页显示内容的方法.分享给大家供大家参考,具体如下: 分页 1.作用 数据加载优化 2.前端引入bootstrap样式: {# 引入bootstrap样式的cdn资源 #} <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  • Django实现后台上传并显示图片功能

    1.安装pillow pip install Pillow 2.创建app python manage.py startapp upload 3. project设定 settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'dj

  • Django admin实现TextField字段changelist页面换行、空格正常显示

    Django admin实现TextField字段changelist页面换行、空格正常显示

    目录 问题背景 原因 解决方案 使用list_editable 使用format_html--满足只读需求 问题背景 在Django后台的使用admin view绑定model后,可以很方便的通过网页对底层的数据表进行增删查改操作. 在实际工作中有一些数据字段会存储了json或者其他包含换行符.空格符的文本内容,这些文本内容在记录编辑详情页是能正常显示换行.空格的,如下: 但是在changelist页面则会省略所有空格.换行,导致可读性较差,如下: 原因 究其原因,其实是因为在编辑详情页面,存放

  • django admin 根据choice字段选择的不同来显示不同的页面方式

    我就废话不多说了,大家还是直接看代码吧! 一.举例 tip/tip.js var react = function () { if (django.jQuery('#id_tiptype').val() == 'content') { django.jQuery('#id_content').parent().parent().show(500); django.jQuery('#id_image').parent().parent().hide(500); django.jQuery('#id

  • django admin后管定制-显示字段的实例

    先说需求: 1.django 自带了admin后管,如果我们需要使用,只需把我们定义的models注册即可: 2.但如果只是简单注册,那显示的很简单,根本看不到每行记录的描述信息,全部以model object 形式显示,必须点击进去才能看到信息,太不方便,如下图: 1.显示关键信息 效果如下图,这样就好看多啦. 2.配置 在 admin.py 文件中配置一下就行. admin.py # Underwriter admin model class UnderwriterAdmin(admin.M

  • Django admin model 汉化显示文字的实现方法

    1.将添加blog的后台基本操作 在blog文件夹下新建一个admin.py文件加入一下代码: from django.contrib import admin from djcms.apps.blog.models import Post, Category, Tag admin.site.register(Post) admin.site.register(Category) admin.site.register(Tag) 重启服务,再到浏览器上登录到后台,是不是增加了对blog的基本操作

  • Django admin组件的使用

    admin admin 是 Django 自带的后台管理组件,你可以在 admin 中执行增删改查等操作. 它以可视化的方式让你来操纵模型表,十分的便捷. 基本使用 数据准备 如下,在 app01 中有一个这样的模型表: from django.db import models # Create your models here. class User(models.Model): user_id = models.AutoField(primary_key=True, verbose_name

  • Django admin实现图书管理系统菜鸟级教程完整实例

    Django admin实现图书管理系统菜鸟级教程完整实例

    Django 有着强大而又及其易用的admin后台,在这里,你可以轻松实现复杂代码实现的功能,如搜索,筛选,分页,题目可编辑,多选框. 简单到,一行代码就可以实现一个功能,而且模块之间耦合得相当完美. 不信,一起来看看吧!?用Django实现管理书籍的系统,并能在前台界面对书籍进行增删查改,筛选,分页,以及批量查询修改功能. 准备工作 #准备好你的数据库模型思维导图 0.新建一个Django项目,起名为books,并且同时新建一个应用book11 1.首先要设置models模块,根据思维导图,我

  • 详解Django admin高级用法

    使用Django意味着后台框架的几乎所有内容都会和Django产生互动,排除功能全部手撸的情况. Django 后台admin有大量的属性和方法,拥有强大的功能和自定义能力.通过完整的代码来看Django admin的基础设置和高级用法,并结合form表单来实现深度自定义. 简单使用 如果只是使用admin自带的数据管理功能,只需要将模型注册到admin中,就可以实现. from django.contrib import admin admin.site.register(News) admi

  • django admin 添加自定义链接方式

    背景 最近做项目开发出现一个需求,就是前端会发来用户对某一项内容的报错,报错信息中包含出错内容的id,为了方便管理,需要实现点击这个id直接转达相应内容的详情页面. 效果展示 解决 首先在django admin的列表中查看数据id所代表的链接 使用浏览器的检查元素功能查看点击该id所跳转的链接 现在我们知道点击admin页面跳转链接的格式了. 自定义widget 假如我们的内容id使用CharField字段存储,那么可以这样自定义一个widget HTML {% load myfileter

  • 在django admin详情表单显示中添加自定义控件的实现

    在开发中有需求在详情显示里外键字段内容,并且添加按钮弹窗内容,以及按钮跳转内容. 以前并没有做过相似的开发,我们的后台是xadmin,当时正在研究xadmin的插件,于是想着能不能用插件去做,后来发现太麻烦,而且实现起来我也没研究通,主要是添加按钮之类的没搞懂,于是就换了一种简单的方法. 首先先讲解下思路,admin中有几个界面,一个是展示的list界面,一个是详情的model界面,model中其实就是详情detail,里面记录了此条数据的全部内容,精简来说就是一个form表单的内容展示. 那么

随机推荐