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


Posted in Python onMay 19, 2019

前言

我们经常会有这样的需求,比如评论功能,每个评论都有可能会有自己的子评论,如果在界面只展示成一列的话非常不美观,也不能体现出他们的层级关系。那么我们今天就来看看如何使用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 相关文章推荐
python3使用tkinter实现ui界面简单实例
Jan 10 Python
详解Golang 与python中的字符串反转
Jul 21 Python
python 获取字符串MD5值方法
May 29 Python
基于Python3.6+splinter实现自动抢火车票
Sep 25 Python
Django框架使用内置方法实现登录功能详解
Jun 12 Python
python基于三阶贝塞尔曲线的数据平滑算法
Dec 27 Python
tensorflow自定义激活函数实例
Feb 04 Python
Python Tornado核心及相关原理详解
Jun 24 Python
Python字典取键、值对的方法步骤
Sep 30 Python
appium+python自动化配置(adk、jdk、node.js)
Nov 17 Python
使用python爬取抖音app视频的实例代码
Dec 01 Python
Python中for后接else的语法使用
May 18 Python
使用Python3内置文档高效学习以及官方中文文档
May 19 #Python
python反编译学习之字节码详解
May 19 #Python
python从入门到精通 windows安装python图文教程
May 18 #Python
详解用Python实现自动化监控远程服务器
May 18 #Python
Python实现打砖块小游戏代码实例
May 18 #Python
如何在Python中实现goto语句的方法
May 18 #Python
OpenCV搞定腾讯滑块验证码的实现代码
May 18 #Python
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP使用递归生成文章树
2015/04/21 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
js 异步处理进度条
2010/04/01 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python频繁写入文件时提速的方法
2019/06/26 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
资深地理教师自我评价
2013/09/21 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
小学语文业务学习材料
2014/06/02 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
2014年外联部工作总结
2014/11/17 职场文书
长城的导游词
2015/01/30 职场文书
回复函范文
2015/07/14 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
详解MySQL连接挂死的原因
2021/05/18 MySQL