表的自關聯(lián), 實現(xiàn)省市區(qū)的聯(lián)動
models:
class AreaInfo(models.Model):
title = models.CharField(max_length=20)
pid = models.ForeignKey('AreaInfo', null=True)
- 主鍵使用的默認生成的主鍵id
- title存儲省市縣名稱
- pid_id作為外鍵 進行自關聯(lián)
views
定義兩個view, 一個用來返回模板 , 一個用來根據市區(qū)返回對應的json
- area 用來返回模板
def area(request):
return render(request, 'booktest/area.html')
- getArea 用來返回json數據
def getArea(request, id): # 接收一個參數的id, 指modde中的pid屬性對應的字段,即表中的pid_id
area_pid = int(id) # 將參數轉成int類型
if area_pid == 0: # 為0時表示為查詢省 , 省的pid_id為null
area_data = AreaInfo.objects.filter(pid__isnull=True).values('id', 'title')
else: # 查詢市或者區(qū)縣
area_data = AreaInfo.objects.filter(pid_id=area_pid).values('id', 'title')
area_list = []
# 雖然area_data看起來像是列表內包含多個字典類型的,
# 但其實返回的是django.db.models.query.ValuesListQuerySet類型,
# 所以需要自己轉成list類型.
# 否則不能進行json序列化.
for area in area_data:
area_list.append({'id': area['id'], 'title': area['title']})
# 然后通過jsonResponse返回給請求方, 這里是list而不是dict, 所以safe需要傳入False.
return JsonResponse(area_list, content_type='application/json', safe=False)
urls
url(r'^area$', views.area, name='area'),
url(r'^getArea/(\d+)$', views.getArea, name='getArea'),
剩下的就是templates了
- booktest/area.html 其中使用的jquery請求數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/booktest/js/jquery-1.12.4.min.js"></script>
<script>
getArea = function (a, b) {
$.get('/getArea/' + a, function (dic) {
$.each(dic, function (index, item) {
b.append('<option value="' + item.id + '">' + item.title + '</option>')
})
})
};
$(function () {
pro = $('#pro'); //省
city = $('#city'); //市
dis = $('#dis'); //縣
// 查詢省信息
getArea(0, pro);
//根據省的改變查詢市的信息
pro.change(function () {
city.empty().append('<option value="">請選擇市</option>');
dis.empty().append('<option value="">請選擇縣</option>');
getArea(this.value, city)
});
//根據市的改變查詢縣的信息
city.change(function () {
dis.empty().append('<option value="">請選擇縣</option>');
getArea(this.value, dis)
})
})
</script>
</head>
<body>
<select id="pro">
<option value="">請選擇省</option>
</select>
<select id="city">
<option value="">請選擇市</option>
</select>
<select id="dis">
<option value="">請選擇縣</option>
</select>
</body>
</html>
area.gif
