快捷導(dǎo)航

Django admin實(shí)現(xiàn)TextField字段changelist頁(yè)面換行、空格正常顯示

更新時(shí)間：2022年01月05日 10:20:57 作者：及時(shí)

本文主要介紹了Django admin實(shí)現(xiàn)TextField字段changelist頁(yè)面換行、空格正常顯示，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

問(wèn)題背景

在Django后臺(tái)的使用admin view綁定model后，可以很方便的通過(guò)網(wǎng)頁(yè)對(duì)底層的數(shù)據(jù)表進(jìn)行增刪查改操作。

在實(shí)際工作中有一些數(shù)據(jù)字段會(huì)存儲(chǔ)了json或者其他包含換行符、空格符的文本內(nèi)容，這些文本內(nèi)容在記錄編輯詳情頁(yè)是能正常顯示換行、空格的，如下：

但是在changelist頁(yè)面則會(huì)省略所有空格、換行，導(dǎo)致可讀性較差，如下：

原因

究其原因，其實(shí)是因?yàn)樵诰庉嬙斍轫?yè)面，存放文本的標(biāo)簽是textarea，在該標(biāo)簽中的文本內(nèi)容并不會(huì)忽略換行、空格字符，通過(guò)使用瀏覽器開(kā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頁(yè)面，默認(rèn)使用的是直接就是td標(biāo)簽，即直接放入一個(gè)表單元格之中，這時(shí)根據(jù)HTML標(biāo)準(zhǔn)會(huì)將所有連續(xù)的空格、換行符均處理為單個(gè)空格：

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

解決方案

以一個(gè)簡(jiǎn)單的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頁(yè)面，將使用textarea標(biāo)簽修飾lang_content內(nèi)容，于是空格、換行符就能夠正確顯示：

同時(shí)在changelist頁(yè)面將可以直接編輯lang_content字段，無(wú)法滿(mǎn)足只希望該字段在changelist頁(yè)面可讀，而不可編輯的需求，相當(dāng)于是把編輯功能和顯示功能強(qiáng)制綁定無(wú)法分離，缺乏靈活性。

使用format_html--滿(mǎn)足只讀需求

在django.utils.html中提供了一個(gè)format_html函數(shù)，該函數(shù)可用于將所有輸出內(nèi)容按HTML格式轉(zhuǎn)義渲染。

于是可以通過(guò)在admin class中定義一個(gè)專(zhuān)門(mén)負(fù)責(zé)展示lang_content內(nèi)容的實(shí)例方法，將lang_content內(nèi)容用pre或textarea標(biāo)簽包裹，而后經(jīng)過(guò)format_html轉(zhuǎn)義后返回。此方法更加靈活，還可通過(guò)調(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)

顯示效果如下：

對(duì)應(yīng)網(wǎng)頁(yè)代碼如下：

<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頁(yè)面換行、空格正常顯示的文章就介紹到這了,更多相關(guān)Django changelist 正常顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: