django 自关联之 - 省市县

表的自关联, 实现省市区的联动

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