Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > Python网站web

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

来源:中文源码网    浏览:397 次    日期:2024-04-27 14:24:47
【下载文档:  利用Django模版生成树状结构实例代码.txt 】


利用Django模版生成树状结构实例代码
前言
我们经常会有这样的需求,比如评论功能,每个评论都有可能会有自己的子评论,如果在界面只展示成一列的话非常不美观,也不能体现出他们的层级关系。那么我们今天就来看看如何使用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 %}


    {% 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 %}


其中的{% query article_comments parent_comment=None as parent_comments %}的功能就是从评论中筛选出来是父级的评论。 comment_item_tree.html的实现也很简单:
{% load blog_tags %}
  • style="margin-left: {% widthratio depth 1 3 %}rem">


  • {% 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 %}
    其中最主要的部分就是标签后面那段。这里使用with和include配合来在每一次循环里面重复的引入comment_item_tree.html,并且每次引入时赋予当前的评论变量和depth(每层循环depth会+1)。然后在每个评论处使用style="margin-left: {% widthratio depth 1 3 %}rem"来实现缩进,这样就实现了树状显示。
    总结
    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对中文源码网的支持。

    相关内容