溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
我們經常會有這樣的需求，比如評論功能，每個評論都有可能會有自己的子評論，如果在界面只展示成一列的話非常不美觀，也不能體現出他們的層級關系。那么我們今天就來看看如何使用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" >
<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 }}"
>
<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）。然后在每個評論處使用來實現縮進，這樣就實現了樹狀顯示。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
