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

 更新时间:2019年05月19日 10:47:01   作者:且听风吟  
这篇文章主要给大家介绍了关于利用Django模版生成树状结构的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用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 %}
 <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"来实现缩进,这样就实现了树状显示。

总结

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

相关文章

  • python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)

    python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子

    UDP,用户数据报传输协议,它位于TCP/IP协议的传输层,是一种无连接的协议,它发送的报文不能确定是否完整地到达了另外一端
    2014-04-04
  • Python学习笔记之pandas索引列、过滤、分组、求和功能示例

    Python学习笔记之pandas索引列、过滤、分组、求和功能示例

    这篇文章主要介绍了Python学习笔记之pandas索引列、过滤、分组、求和功能,结合实例形式分析了Python针对抓取保存的csv数据使用pandas进行索引列、过滤、分组、求和等操作的相关实现技巧,需要的朋友可以参考下
    2019-06-06
  • python爬虫之urllib3的使用示例

    python爬虫之urllib3的使用示例

    这篇文章主要介绍了 python爬虫之urllib3的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Python中一些深不见底的“坑”

    Python中一些深不见底的“坑”

    这篇文章主要给大家介绍了关于Python中一些深不见底的“坑”,文中通过示例代码介绍的非常详细,对大家学习或者使用Python具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • Python中print函数简单使用总结

    Python中print函数简单使用总结

    在本篇文章里小编给大家整理的是关于Python中怎么使用print函数的相关知识点内容,需要的朋友们可以学习下。
    2019-08-08
  • Python中decorator使用实例

    Python中decorator使用实例

    这篇文章主要介绍了Python中decorator使用实例,本文讲解了如何调用decorator、decorator函数的定义、decorator的应用场景等内容,需要的朋友可以参考下
    2015-04-04
  • PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解

    PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解

    这篇文章主要介绍了PyCharm+Pipenv虚拟环境作开发和依赖管理的教程,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • python 多进程并行编程 ProcessPoolExecutor的实现

    python 多进程并行编程 ProcessPoolExecutor的实现

    这篇文章主要介绍了python 多进程并行编程 ProcessPoolExecutor的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • python 基于dlib库的人脸检测的实现

    python 基于dlib库的人脸检测的实现

    这篇文章主要介绍了python 基于dlib库的人脸检测的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Python tkinter三种布局实例详解

    Python tkinter三种布局实例详解

    这篇文章主要介绍了Python tkinter三种布局实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01

最新评论