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

问题背景

在Django后台的使用admin view绑定model后,可以很方便的通过网页对底层的数据表进行增删查改操作。
在实际工作中有一些数据字段会存储了json或者其他包含换行符、空格符的文本内容,这些文本内容在记录编辑详情页是能正常显示换行、空格的,如下:

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

原因

究其原因,其实是因为在编辑详情页面,存放文本的标签是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)

显示效果如下:
image
对应网页代码如下:

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

转载请注明出处,原文地址:https://www.cnblogs.com/AcAc-t/p/django_admin_changelist_textfield_newline_display.html

签名:拥抱开源,拥抱自由

推荐这些技术文章:

froms组件 cookie session

目录删除二次确认forms组件钩子函数forms组件字段参数form组件字段类型froms组件源码分析ModelForm简介cookie与session简介django操作cookie
删除二次确认
# ajax结合sweetalert
1.下载源码 只需要到dist文件夹内的css和js即可
2.拷贝使用官网提供的案例代码
3.添加配置参数新增等待特效

<div class="...

MongoEngine中文文档

简介:
MongoEngine是一个基于pymongo开发的ODM库,对应与SQLAlchemy。同时,在MongoEngine基础上封装了Flask-MongoEngine,用于支持flask框架。
官方地址:http://docs.mongoengine.org/index.html
入门教程
1.安装MongoEngine
pip3 install mongoengine

2.连接至Mo...

五、模板语法

五、模板语法
模板引擎是一种可以让开发者把服务端数据填充到html网页中完成渲染效果的技术。它实现了把前端代码和服务端代码分离的作用,让项目中的业务逻辑代码和数据表现代码分离,让前端开发者和服务端开发者可以更好的完成协同开发。

静态网页:页面上的数据都是写死的,万年不变
动态网页:页面上的数据是从后端动态获取的(比如后端获取当前时间;后端获取数据库数据然后传递给前端页面)

Django框架中...

06--功能开发--动态发布页、首页、动态详情页02

day07 功能开发
1.发布逻辑
1.1 小程序

选图片

填内容

提交-数据格式
// v1.0

{
// cover字段: 让前端自己处理传过来,不要后端切片自己构造存储。理由:1.省事 2.节约服务器操作
cover:"https://mini-1251317460.cos.ap-chengdu.myqcloud.com/08a9daei1578736867828...

day59(局部钩子 全局钩子 cookie与session简介 )

今日内容概要

作业讲解

forms组件字段参数
forms组件字段类型
forms组件源码分析
cookie与session简介
django操作cookie与session

作业讲解
url代码:
urlpatterns = [
url(r'^admin/', admin.site.urls),
#作业讲解
url(r'^user_list/',views...

forms组件钩子函数、字段参数、字段类型、cookie与session简介

ajax结合sweetalert使用删除功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=de...

黑马程序员-传智健康项目(第七章)

传智健康项目

黑马程序员-传智健康项目(第一章)
黑马程序员-传智健康项目(第二章)
黑马程序员-传智健康项目(第三章)
黑马程序员-传智健康项目(第四章)
黑马程序员-传智健康项目(第五章)
黑马程序员-传智健康项目(第六章)
黑马程序员-传智健康项目(第七章)
黑马程序员-传智健康项目(第八章)
黑马程序员-传智健康项目(第九章)
黑马程序员-传智健康项目(第十章)
黑马程序员-传智健康项...

Django day10(forms组件 钩子函数 字段参数 源码 ModelForm cookie与session)

目录forms组件钩子函数forms组件字段参数forms组件源码分析ModelForm简介cookie与session简介django操作cookie

sweetalert使用案例
# ajax结合sweetalert
1.下载源码 只需要到dist文件夹内的css和js即可
2.拷贝使用官网提供的案例代码
3.添加配置参数新增等待特效

<div class="contain...

13-day08-项目开发-wiki开发(添加、多级目录、预览)

目录一、wiki表结构设计二、wiki首页展示三、wiki添加文章3.1、wiki添加文章3.2、修复父文章Bug(父文章,应该仅展示本项目的文章)四、wiki文章多级目录展示4.1、实现方案4.1.1、方式一 :模板渲染4.1.2、方式二 :后端 + 前端完成ajax+ID选择器4.2、后端 + 前端完成ajax+ID选择器实现多级目录4.3、修复多级目录展示部分存在的问题4.3.1、问题一 ...

064_Js常用的五大事件 onclick nochanger onload onsubmit onblur

事件是电脑输入设备与页面交互的响应。

onload加载完成事件:onload事件 是在页面被浏览器加载完成之后。自动触发的响应
onclick单击事件
onblur失去焦点事件
onchange内容发生改变事件 经常用于select下拉列表选中后的内容发生改变时候触发
onsubmit表单提交事件 经常用来在表单提交的时候验证所有表单项是否合法。

事件的注册又分为静态注册和动态...

文章标题:Django admin实现TextField字段changelist页面换行、空格正常显示
文章链接:https://www.dianjilingqu.com/3909.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>