快捷導(dǎo)航

利用Django模版生成樹狀結(jié)構(gòu)實(shí)例代碼

更新時間：2019年05月19日 10:47:01 作者：且聽風(fēng)吟

這篇文章主要給大家介紹了關(guān)于利用Django模版生成樹狀結(jié)構(gòu)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Django具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

我們經(jīng)常會有這樣的需求，比如評論功能，每個評論都有可能會有自己的子評論，如果在界面只展示成一列的話非常不美觀，也不能體現(xiàn)出他們的層級關(guān)系。那么我們今天就來看看如何使用Django的模版來生成樹狀結(jié)構(gòu)，以本站為例,效果如下圖所示：

那么我們要怎么實(shí)現(xiàn)呢？首先先看看評論實(shí)體的定義，如下所示:

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字段，關(guān)聯(lián)自己。這樣就可以根據(jù)這個字段來生成層級關(guān)系。為了方便我們使用，我們自定義了一個叫query的tag，也可以叫修飾器。定義tag的代碼如下，tag的定義應(yīng)該定義在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)

接下來下面這段代碼是樹節(jié)點(diǎn)的模版代碼。

{% 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的實(shí)現(xiàn)也很簡單：

{% 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="回復(fù)給{{ comment_item.author.username }}">回復(fù)</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>標(biāo)簽后面那段。這里使用with和include配合來在每一次循環(huán)里面重復(fù)的引入comment_item_tree.html，并且每次引入時賦予當(dāng)前的評論變量和depth（每層循環(huán)depth會+1）。然后在每個評論處使用style="margin-left: {% widthratio depth 1 3 %}rem"來實(shí)現(xiàn)縮進(jìn)，這樣就實(shí)現(xiàn)了樹狀顯示。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: