在 Web 開(kāi)發(fā)中，省/市/區(qū)(縣)是經(jīng)常需要用到的數(shù)據(jù)，而省/市/區(qū)(縣)是一種層級(jí)關(guān)系。在使用 Django 做 Web 開(kāi)發(fā)時(shí)，此時(shí) Django-mptt 是一個(gè)很有用的模塊。
環(huán)境版本：
- python 2.7.10
- Django 1.8.5
- django-mptt 0.8.7
安裝 django-mptt
pip install django-mptt
新建 area 應(yīng)用
startapp area
在 models.py 里添加如下代碼：
#coding:utf-8
from django.db import models
from mptt.models import MPTTModel
class Area(MPTTModel):
name = models.CharField('名稱', max_length=50, unique=True)
parent = models.ForeignKey('self', verbose_name='上級(jí)區(qū)域', null=True, blank=True, related_name='children')
class Meta:
db_table = 'area'
verbose_name = verbose_name_plural = '省/市/地區(qū)(縣)'
def __unicode__(self):
return self.name
在這里只需讓 Area 繼承 MPTTModel。
需要說(shuō)明的是，實(shí)際上 MPTTModel 隱藏了四個(gè)變量：level，lft，rght 和 tree_id。大多數(shù)時(shí)候我們是用不到這幾個(gè)變量的。另外，如果你的 Model 中 parent 變量名字不是 "parent" 時(shí)，應(yīng)當(dāng)在 Model 中MPTT 元類中指明：
#coding:utf-8
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='上級(jí)區(qū)域', null=True, blank=True, related_name='children')
class Meta:
db_table = 'area'
verbose_name = verbose_name_plural = '省/市/地區(qū)(縣)'
class MPTTMeta:
parent_attr = 'parent_area'
def __unicode__(self):
return self.name
在 admin.py 里添加如下代碼：
from django.contrib import admin
from .models import Area
class AreaAdmin(admin.ModelAdmin):
list_display = ('id', 'name', 'parent', 'level')
admin.site.register(Area, AreaAdmin)
在項(xiàng)目的 settings.py 里 INSTALLED_APPS 里添加 mptt 和 area，之后執(zhí)行數(shù)據(jù)庫(kù)操作。之后在 admin 后臺(tái)中按照層級(jí)關(guān)系添加省/市/區(qū)(縣)數(shù)據(jù)。
在 views.py 里添加如下代碼：
from django.shortcuts import render_to_response
from .models import Area
def tree(request):
nodes = Area.objects.all()
return render_to_response('tree.html', {'nodes': nodes})
在 templates 文件夾下添加模版文件 tree.html：
{% load staticfiles %}
{% load mptt_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django 樹(shù)形結(jié)構(gòu)</title>
<link rel="stylesheet" href="{% static "css/css.css" %}"/>
<script src="{% static "js/jquery-1.11.2.min.js" %}"></script>
<script src="{% static "js/SimpleTree.js" %}"></script>
<script type="text/javascript">
$(function(){
$(".framework_nav").SimpleTree({
});
});
</script>
</head>
<body>
<div class="framework_nav">
<ul>
<li class="all">
<a href="#">省/市/地區(qū)(縣)</a>
</li>
<ul show="true">
{% recursetree nodes %}
<li>
{% if node.is_leaf_node %}
<li><a href="#">{{ node.name }}</a></li>
{% else %}
<li><a href="#">{{ node.name }}</a></li>
<ul>
<li><a href="#">{{ children }}</a></li>
</ul>
{% endif %}
</li>
{% endrecursetree %}
</ul>
</ul>
</div>
</body>
</html>
別忘了在 settings.py 里添加如下代碼：
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
('css', os.path.join(STATIC_ROOT, 'css')),
('js', os.path.join(STATIC_ROOT, 'js')),
('img', os.path.join(STATIC_ROOT, 'img')),
]
否則獲取不到靜態(tài)資源！
最后在項(xiàng)目的 urls.py 里添加如下代碼：
from area.views import tree
urlpatterns = [
...
url(r'^tree/', tree),
...
]
這樣，就可以通過(guò)訪問(wèn) http://127.0.0.1:8000/tree/ 看到樹(shù)形結(jié)構(gòu)了。
具體代碼可以參看我在 github 上的 tree 倉(cāng)庫(kù)。
