利用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实现图片批量剪切示例
Mar 25 Python
python静态方法实例
Jan 14 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
Jan 10 Python
Sanic框架安装与简单入门示例
Jul 16 Python
Appium Python自动化测试之环境搭建的步骤
Jan 23 Python
Python使用Pickle模块进行数据保存和读取的讲解
Apr 09 Python
python对绑定事件的鼠标、按键的判断实例
Jul 17 Python
python+selenium 鼠标事件操作方法
Aug 24 Python
Python实现鼠标自动在屏幕上随机移动功能
Mar 14 Python
在Tensorflow中实现leakyRelu操作详解(高效)
Jun 30 Python
Django crontab定时任务模块操作方法解析
Sep 10 Python
深入浅析python3 依赖倒置原则(示例代码)
Jul 09 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
php URL编码解码函数代码
2009/03/10 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
python中yaml配置文件模块的使用详解
2018/04/27 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
python对XML文件的操作实现代码
2020/03/27 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
建筑自我鉴定
2013/10/19 职场文书
新闻学专业应届生求职信
2013/11/08 职场文书
学校火灾防控方案
2014/06/09 职场文书
党支部三会一课计划
2014/09/24 职场文书
2015年宣传工作总结
2015/04/08 职场文书
电影圆明园观后感
2015/06/03 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python