Django admin實(shí)現(xiàn)TextField字段changelist頁面換行、空格正常顯示
問題背景
在Django后臺的使用admin view綁定model后,可以很方便的通過網(wǎng)頁對底層的數(shù)據(jù)表進(jìn)行增刪查改操作。
在實(shí)際工作中有一些數(shù)據(jù)字段會存儲了json或者其他包含換行符、空格符的文本內(nèi)容,這些文本內(nèi)容在記錄編輯詳情頁是能正常顯示換行、空格的,如下:

但是在changelist頁面則會省略所有空格、換行,導(dǎo)致可讀性較差,如下:

原因
究其原因,其實(shí)是因?yàn)樵诰庉嬙斍轫撁?,存放文本的?biāo)簽是textarea,在該標(biāo)簽中的文本內(nèi)容并不會忽略換行、空格字符,通過使用瀏覽器開發(fā)者工具可以看到如下代碼:
<textarea name="lang_content" cols="40" rows="10" class="vLargeTextField" required="" id="id_lang_content">{
"en": "this is a content",
"zh-hant": "這是默認(rèn)正文內(nèi)容"
}</textarea>而在changelist頁面,默認(rèn)使用的是直接就是td標(biāo)簽,即直接放入一個表單元格之中,這時根據(jù)HTML標(biāo)準(zhǔn)會將所有連續(xù)的空格、換行符均處理為單個空格:
<td class="field-lang_content">{
"en": "this is a content",
"zh-hant": "這是默認(rèn)正文內(nèi)容"
}</td>解決方案
以一個簡單的test_record table的admin view為例。
表結(jié)構(gòu):
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標(biāo)簽修飾lang_content內(nèi)容,于是空格、換行符就能夠正確顯示:

同時在changelist頁面將可以直接編輯lang_content字段,無法滿足只希望該字段在changelist頁面可讀,而不可編輯的需求,相當(dāng)于是把編輯功能和顯示功能強(qiáng)制綁定無法分離,缺乏靈活性。
使用format_html--滿足只讀需求
在django.utils.html中提供了一個format_html函數(shù),該函數(shù)可用于將所有輸出內(nèi)容按HTML格式轉(zhuǎn)義渲染。
于是可以通過在admin class中定義一個專門負(fù)責(zé)展示lang_content內(nèi)容的實(shí)例方法,將lang_content內(nèi)容用pre或textarea標(biāo)簽包裹,而后經(jīng)過format_html轉(zhuǎn)義后返回。此方法更加靈活,還可通過調(diào)整標(biāo)簽各屬性定制輸出效果--比如設(shè)置高度(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)顯示效果如下:

對應(yīng)網(wǎng)頁代碼如下:
<td class="field-lang_content_view"><pre>{
"en": "this is a content",
"zh-hant": "這是默認(rèn)正文內(nèi)容"
}</pre></td>到此這篇關(guān)于Django admin實(shí)現(xiàn)TextField字段changelist頁面換行、空格正常顯示的文章就介紹到這了,更多相關(guān)Django changelist 正常顯示內(nèi)容請搜索本站以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持本站!
版權(quán)聲明:本站文章來源標(biāo)注為YINGSOO的內(nèi)容版權(quán)均為本站所有,歡迎引用、轉(zhuǎn)載,請保持原文完整并注明來源及原文鏈接。禁止復(fù)制或仿造本網(wǎng)站,禁止在非maisonbaluchon.cn所屬的服務(wù)器上建立鏡像,否則將依法追究法律責(zé)任。本站部分內(nèi)容來源于網(wǎng)友推薦、互聯(lián)網(wǎng)收集整理而來,僅供學(xué)習(xí)參考,不代表本站立場,如有內(nèi)容涉嫌侵權(quán),請聯(lián)系alex-e#qq.com處理。
關(guān)注官方微信