使用Django模版生成树状结构

栏目: Python · 发布时间: 5年前

内容简介:我们经常会有这样的需求,比如评论功能,每个评论都有可能会有自己的子评论,如果在界面只展示成一列的话非常不美观,也不能体现出他们的层级关系。那么我们今天就来看看如何使用那么我们要怎么实现呢?首先先看看评论实体的定义,如下所示:

我们经常会有这样的需求,比如评论功能,每个评论都有可能会有自己的子评论,如果在界面只展示成一列的话非常不美观,也不能体现出他们的层级关系。那么我们今天就来看看如何使用 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 字段,关联自己。这样就可以根据这个字段来生成层级关系。 为了方便我们使用,我们自定义了一个叫 querytag ,也可以叫修饰器。定义 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 rel="nofollow" class="comment-reply-link"
                              href="javascript:void(0)"
                              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> 标签后面那段。这里使用 withinclude 配合来在每一次循环里面重复的引入 comment_item_tree.html ,并且每次引入时赋予当前的评论变量和 depth (每层循环depth会+1)。然后在每个评论处使用 style="margin-left: {% widthratio depth 1 3 %}rem" 来实现缩进,这样就实现了树状显示。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Linux内核设计与实现

Linux内核设计与实现

拉芙 / 陈莉君、唐华、张波 / 机械工业出版社 / 2006-1 / 38.00元

《Linux内核设计与实现》基于Linux2.6内核系列详细介绍Linux内核系统,覆盖了从核心内核系统的应用到内核设计与实现等各方面的内容。主要内容包括:进程管理、系统调用、中断和中断处理程序、内核同步、时间管理、内存管理、地址空间、调试技术等。本书理论联系实践,既介绍理论也讨论具体应用,能够带领读者快速走进Linux内核世界,真正开发内核代码。 本书适合作为高等院校操作系统课程的教材......一起来看看 《Linux内核设计与实现》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具