表的自关联, 实现省市区的联动
models:
class AreaInfo(models.Model):
title = models.CharField(max_length=20)
pid = models.ForeignKey('AreaInfo', null=True)
- 主键使用的默认生成的主键id
- title存储省市县名称
- pid_id作为外键 进行自关联
views
定义两个view, 一个用来返回模板 , 一个用来根据市区返回对应的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: # 查询市或者区县
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
网友评论