利用Django模版生成树状结构实例代码
作者:且听风吟 时间:2023-11-10 16:41:11
前言
我们经常会有这样的需求,比如评论功能,每个评论都有可能会有自己的子评论,如果在界面只展示成一列的话非常不美观,也不能体现出他们的层级关系。那么我们今天就来看看如何使用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"
来实现缩进,这样就实现了树状显示。
来源:https://www.lylinux.net/article/2019/2/28/55.html
标签:django,模版,树状结构


猜你喜欢
php session处理的定制
2023-11-15 18:38:12
Python3运算符常见用法分析
2023-07-29 07:18:39

Python类中的装饰器在当前类中的声明与调用详解
2021-03-07 10:29:35

python整合ffmpeg实现视频文件的批量转换
2023-06-07 03:03:12
10行Python代码实现Web自动化管控的示例代码
2021-05-30 17:01:05

python mysqldb连接数据库
2024-01-15 17:52:56
OpenCV 基本图形绘制函数详解
2022-01-22 11:09:59

实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2021-04-26 21:27:11

python上下文管理的使用场景实例讲解
2022-01-31 08:38:33
解压版MYSQL中文乱码问题解决方案
2024-01-21 12:40:12

解决VIM显示utf-8文件乱码问题
2023-04-30 07:02:14
用Python中的__slots__缓存资源以节省内存开销的方法
2021-06-21 10:33:40

python队列基本操作和多线程队列
2021-01-02 23:28:46

Mysql 5.6 "隐式转换"导致的索引失效和数据不准确的问题
2024-01-22 04:07:47

SQL Server日志文件总结及日志满的处理
2009-03-25 16:17:00
无图片CSS圆角的五个实例
2008-08-02 12:18:00

pip install命令安装扩展库整理
2021-10-13 21:49:14

python format 格式化输出方法
2023-12-24 16:26:19
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2021-03-16 16:20:31
javascript使用Blob对象实现的下载文件操作示例
2024-04-29 13:14:52
