利用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 相关文章推荐
Python出现segfault错误解决方法
Apr 16 Python
如何用itertools解决无序排列组合的问题
May 18 Python
Python 编码Basic Auth使用方法简单实例
May 25 Python
Python正则表达式知识汇总
Sep 22 Python
Python内置函数 next的具体使用方法
Nov 24 Python
Python中XlsxWriter模块简介与用法分析
Apr 24 Python
详解python深浅拷贝区别
Jun 24 Python
python全栈要学什么 python全栈学习路线
Jun 28 Python
基于多进程中APScheduler重复运行的解决方法
Jul 22 Python
django实现支付宝支付实例讲解
Oct 17 Python
python3 实现调用串口功能
Dec 26 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
Jan 05 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
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
学习ExtJS table布局
2009/10/08 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
玩转python爬虫之cookie使用方法
2016/02/17 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
运动会通讯稿200字
2014/02/16 职场文书
财务审计整改报告
2014/11/06 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
功夫熊猫观后感
2015/06/10 职场文书
工作经历证明范本
2015/06/15 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书