利用Django模版生成树状结构实例代码

2024-09-28 18:33:47

前言

我们经常会有这样的需求，比如评论功能，每个评论都有可能会有自己的子评论，如果在界面只展示成一列的话非常不美观，也不能体现出他们的层级关系。那么我们今天就来看看如何使用Django的模版来生成树状结构，以本站为例,效果如下图所示：

那么我们要怎么实现呢？首先先看看评论实体的定义，如下所示:

class Comment(models.Model):
 body = models.TextField('正文', max_length=300)
 author = models.ForeignKey(settings.AUTH_USER_MODEL, verbose_name='作者', on_delete=models.CASCADE)
 article = models.ForeignKey(Article, verbose_name='文章', on_delete=models.CASCADE)
 parent_comment = models.ForeignKey('self', verbose_name="上级评论", blank=True, null=True, on_delete=models.CASCADE)

可以看到，有一个parent_comment字段，关联自己。这样就可以根据这个字段来生成层级关系。为了方便我们使用，我们自定义了一个叫query的tag，也可以叫修饰器。定义tag的代码如下，tag的定义应该定义在app/templatetags目录下，这里py文件命名为blog_tags.py：

@register.simple_tag
def query(qs, **kwargs):
 """ template tag which allows queryset filtering. Usage:
   {% query books author=author as mybooks %}
   {% for book in mybooks %}
   ...
   {% endfor %}
 """
 return qs.filter(**kwargs)

接下来下面这段代码是树节点的模版代码。

{% load blog_tags %}
{% load comments_tags %}
 <div id="commentlist-container" class="comment-tab" style="display: block;">
    <ol class="commentlist">
     {% query article_comments parent_comment=None as parent_comments %}
     {% for comment_item in parent_comments %}
      {% with 0 as depth %}
       {% include "comments/tags/comment_item_tree.html" %}
      {% endwith %}
     {% endfor %}
    </ol>
   </div>

其中的{% query article_comments parent_comment=None as parent_comments %}的功能就是从评论中筛选出来是父级的评论。 comment_item_tree.html的实现也很简单：

{% load blog_tags %}
<li class="comment even thread-even depth-{{ depth }} parent" id="comment-{{ comment_item.pk }}"
 style="margin-left: {% widthratio depth 1 3 %}rem">
 <div id="div-comment-{{ comment_item.pk }}" class="comment-body">
  <div class="comment-meta commentmetadata">
   {{ comment_item.created_time }}
  </div>
  <p>{{ comment_item.body |escape|custom_markdown }}</p>
  <div class="reply"><a class="comment-reply-link"
        href="javascript:void(0)" rel="external nofollow"
        onclick="do_reply({{ comment_item.pk }})"
        aria-label="回复给{{ comment_item.author.username }}">回复</a></div>
 </div>

</li><!-- #comment-## -->
{% query article_comments parent_comment=comment_item as cc_comments %}
{% for cc in cc_comments %}
 {% with comment_item=cc template_name="comments/tags/comment_item_tree.html" %}
  {% with depth=depth|add:1 %}
   {% include template_name %}
  {% endwith %}
 {% endwith %}
{% endfor %}

其中最主要的部分就是</li>标签后面那段。这里使用with和include配合来在每一次循环里面重复的引入comment_item_tree.html，并且每次引入时赋予当前的评论变量和depth（每层循环depth会+1）。然后在每个评论处使用style="margin-left: {% widthratio depth 1 3 %}rem"来实现缩进，这样就实现了树状显示。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

剖析Django中模版标签的解析与参数传递

分析直至另一个模板标签模板标签可以像包含其它标签的块一样工作(想想 {% if %} . {% for %} 等). 要创建一个这样的模板标签,在你的编译函数中使用 parser.parse() . 标准的 {% comment %} 标签是这样实现的: def do_comment(parser, token): nodelist = parser.parse(('endcomment',)) parser.delete_first_token() return CommentNode()
使用Django的模版来配合字符串翻译工作

Django模板使用两种模板标签,且语法格式与Python代码有些许不同. 为了使得模板访问到标签,需要将 {% load i18n %} 放在模板最前面. 这个{% trans %}模板标记翻译一个常量字符串 (括以单或双引号) 或可变内容: <title>{% trans "This is the title." %}</title> <title>{% trans myvar %}</title> 如果有noop 选项,变量查询还
Django中模版的子目录与include标签的使用方法

get_template()中使用子目录把所有的模板都存放在一个目录下可能会让事情变得难以掌控. 你可能会考虑把模板存放在你模板目录的子目录中,这非常好. 事实上,我们推荐这样做:一些Django的高级特性(例如将在第十一章讲到的通用视图系统)的缺省约定就是期望使用这种模板布局. 把模板存放于模板目录的子目录中是件很轻松的事情. 只需在调用 get_template() 时,把子目录名和一条斜杠添加到模板名称之前,如: t = get_template('dateapp/current_dat
在Python的Django框架中加载模版的方法

为了减少模板加载调用过程及模板本身的冗余代码,Django 提供了一种使用方便且功能强大的 API ,用于从磁盘中加载模板, 要使用此模板加载API,首先你必须将模板的保存位置告诉框架. 设置的保存文件就是settings.py. 如果你是一步步跟随我们学习过来的,马上打开你的settings.py配置文件,找到TEMPLATE_DIRS这项设置吧. 它的默认设置是一个空元组(tuple),加上一些自动生成的注释. TEMPLATE_DIRS = ( # Put strings here, li
Python的Django框架中自定义模版标签的示例

为了自定义一个模板标签,你需要告诉Django当遇到你的标签时怎样进行这个过程. 当Django编译一个模板时,它将原始模板分成一个个节点 .每个节点都是 django.template.Node 的一个实例,并且具备 render() 方法. 于是,一个已编译的模板就是节点对象的一个列表. 例如,看看这个模板: Hello, {{ person.name }}. {% ifequal name.birthday today %} Happy birthday! {% else %} Be
详解Python的Django框架中的模版继承

在实际应用中,你将用 Django 模板系统来创建整个 HTML 页面. 这就带来一个常见的 Web 开发问题: 在整个网站中,如何减少共用页面区域(比如站点导航)所引起的重复和冗余代码? 解决该问题的传统做法是使用服务器端的 includes ,你可以在 HTML 页面中使用该指令将一个网页嵌入到另一个中. 事实上, Django 通过刚才讲述的 {% include %} 支持了这种方法. 但是用 Django 解决此类问题的首选方法是使用更加优雅的策略-- 模板继承 . 本质上来说,模板
利用Django模版生成树状结构实例代码

前言我们经常会有这样的需求,比如评论功能,每个评论都有可能会有自己的子评论,如果在界面只展示成一列的话非常不美观,也不能体现出他们的层级关系.那么我们今天就来看看如何使用Django的模版来生成树状结构,以本站为例,效果如下图所示: 那么我们要怎么实现呢?首先先看看评论实体的定义,如下所示: class Comment(models.Model): body = models.TextField('正文', max_length=300) author = models.ForeignKey(
jQuery 利用ztree实现树形表格的实例代码

最近公司的项目中要做一个树形表格,因为之前一直在用ztree实现基本的树形结构,理所当然的首先想到利用ztree来做. 网上找了一下别人做的树形表格,有使用ztree的,也有使用treeTable的,但效果都不太好,于是参考使用ztree的做法自己做了一个,贴出来供大家参考,请看注释说明,效果如下所示. <!DOCTYPE HTML> <html> <head> <link href="https://cdn.bootcss.com/zTree.v3/3
pycharm+django创建一个搜索网页实例代码

本文主要研究的是pycharm+django创建一个搜索网页的实例代码,具体步骤和代码示例如下. 创建工程比如,我创建的工程目录结构如下: 命令行进入windows命令行,进入根目录: python manage.py startapp django_web 接着你会在pycharm中发现,多了一个django_web文件夹.如下将截图: 创建一个test.html <!DOCTYPE html> <html> <head> <title>开始搜索<
spring security数据库表结构实例代码

PD建模图建模语句 alter table SYS_AUTHORITIES_RESOURCES drop constraint FK_SYS_AUTH_REFERENCE_SYS_AUTH; alter table SYS_AUTHORITIES_RESOURCES drop constraint FK_SYS_AUTH_REFERENCE_SYS_RESO; alter table SYS_RESOURCES drop constraint FK_SYS_RESO_REFERENCE_SYS
iOS利用UIScrollView实现图片的缩放实例代码

本文介绍了iOS利用UIScrollView实现图片的缩放实例代码,分享给大家: 第一步:添加scrollView到控制器中 UIScrollView *scrollView = [[UIScrollView alloc] init]; scrollView.frame = CGRectMake(40, 250, 300, 200); self.scrollView = scrollView; [self.view addSubview:scrollView]; 第二步:添加图片控件到scrol
Android 实现会旋转的饼状统计图实例代码

Android 实现会旋转的饼状统计图实例代码最近在做一个项目,由于有需要统计的需要,于是就做成了下面饼状统计图. 下图是效果图: 大致思路是: 关于的介绍这里不做详细介绍,如果想深入请点击开源项目MPAndroidChart 下面是其实现: 首先是添加MPAndroidChart依赖: maven { url "https://jitpack.io" } compile 'com.github.PhilJay:MPAndroidChart:v3.0.1' Mainactivity
django 按时间范围查询数据库实例代码

从前台中获得时间范围,在django后台处理request中数据,完成format,按照范围调用函数查询数据库. 介绍一个简单的功能,就是从web表单里获取用户指定的时间范围,然后在数据库中查询此时间范围内的数据. 数据库里的model举例是这样: class book(models.Model): name = models.CharField(max_length=50, unique=True) date = models.DateTimeField() def __unicode__(s
Django模板继承 extend标签实例代码详解

在 views.py 上修改 ... def ordered(req): return render(req, "ordered.html") def shopping_car(req): return render(req, "shopping_car.html") 在 urls.py 上修改 ... path('ordered/', views.ordered), path('shopping_car/', views.shopping_car), ... 在
Django与pyecharts结合的实例代码

一.创建Application 转到manage.py的同级目录,运行: py manage.py startapp NLP 在sitting.py中注册该Application: # Application definition #包含项目中启用的所有Django应用 INSTALLED_APPS = [ 'polls.apps.PollsConfig',#将创建的polls添加到项目中 'NLP' 'django.contrib.admin', 'django.contrib.auth',
PHP利用curl发送HTTP请求的实例代码

cURL 函数概述 PHP支持的由Daniel Stenberg创建的libcurl库允许你与各种的服务器使用各种类型的协议进行连接和通讯. libcurl目前支持http.https.ftp.gopher.telnet.dict.file和ldap协议.libcurl同时也支持HTTPS认证.HTTP POST.HTTP PUT. FTP 上传(这个也能通过PHP的FTP扩展完成).HTTP 基于表单的上传.代理.cookies和用户名+密码的认证. PHP中使用cURL实现Get和Post请

利用Django模版生成树状结构实例代码

相关推荐

随机推荐