1、首先需要安装django-mptt
python manger.py Django-mptt
2、models.py如下:
from django.db
import models
from mptt.models
import MPTTModel
class Area(MPTTModel):
name = models.CharField(
'模块名称'
,
max_length=
50
,
unique=
True)
parent_area = models.ForeignKey(
'self'
,
verbose_name=
'父节点'
,
null=
True,
blank=
True,
related_name=
'children')
community = models.TextField(
'内容'
,
null=
True,
blank=
True)
class Meta:
verbose_name =
'表名'
verbose_name_plural = verbose_name
class MPTTMeta:
parent_attr =
'parent_area'
def
__str__(
self):
return
self.name
3、views.py如下:
def
help(request):
nodes = models.Area.objects.all()
return render(request
,
'help.html'
, {
'nodes': nodes})
4、html页面代码如下:
<div
class=
"tree well"
>
<ul>
<li
class=
"parent_li"
style=
"
display:
list-item"
>
<span
title=
"折叠此级"
>
<i
class=
"glyphicon glyphicon-folder-open glyphicon-minus-sign"
></i>
商贸版
</span>
<ul>
{%
recursetree
nodes %}
{%
if
node.
is_leaf_node %}
<li
class=
"parent_li"
style=
"
display:
none"
>
<span
title=
"折叠此级"
>
<i
class=
"glyphicon glyphicon-minus-sign"
></i>
{{
node.
name }}
</span>
</li>
{%
else %}
<li
class=
"parent_li"
style=
"
display:
none"
>
<span
title=
"折叠此级"
>
<i
class=
"glyphicon glyphicon-minus-sign"
></i>
{{
node.
name }}
</span>
<ul>
{{
children }}
</ul>
</li>
{%
endif %}
{%
endrecursetree %}
</ul>
</ul>
</div>
5、相关js代码
<script
type=
"text/javascript"
>
$(
function(){
$(
'.
tree
li
:has(ul)').
addClass(
'parent_li').
find(
' >
span
').
attr(
'title'
,
'折叠此级')
;
$(
'.
tree
li
.
parent_li
[
ltype
=month] >
span
, .
tree
li
.
parent_li
[
ltype
=year]:gt(0) >
span
').
each(
function (e){
var children =
$(
this).parent(
'
li
.
parent_li
').
find(
' >
ul
>
li
')
;
children.
hide(
'fast')
;
$(
this).
attr(
'title'
,
'展开此级').
find(
' >
i
').
addClass(
'glyphicon-plus-sign').
removeClass(
'glyphicon-minus-sign')
;
})
;
$(
'.
tree
li
.
parent_li
>
span
').
on(
'click'
,
function (e) {
var children =
$(
this).parent(
'
li
.
parent_li
').
find(
' >
ul
>
li
')
;
if (children.
is(
":visible")) {
children.
hide(
'fast')
;
$(
this).
attr(
'title'
,
'展开此级').
find(
' >
i
').
addClass(
'glyphicon-plus-sign').
removeClass(
'glyphicon-minus-sign')
;
}
else {
children.
show(
'fast')
;
$(
this).
attr(
'title'
,
'折叠此级').
find(
' >
i
').
addClass(
'glyphicon-minus-sign').
removeClass(
'glyphicon-plus-sign')
;
}
e.
stopPropagation()
;
})
;
})
;
</script>
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/4aa3ab6015791194dd4a5f47bf8ceece.png)