使用django-mptt创建树结构
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>
效果图