Django Admin实现三级联动(省市区)

通过自定义Admin的模板文件实现省市区的三级联动.要求创建记录时,根据省>市>区的顺序选择依次显示对应数据.
修改记录时默认显示已存在的数据.

Model

class Member(models.Model):

复制代码

name = models.CharField(max_length=100, verbose_name='姓名')

复制代码

province = models.CharField(max_length=100, null=True, blank=True, verbose_name='省份')

复制代码

city = models.CharField(max_length=100, null=True, blank=True, verbose_name='城市')

复制代码

district = models.CharField(max_length=100, null=True, blank=True, verbose_name='区/县')

复制代码

class Meta:

复制代码

verbose_name_plural = verbose_name = '人员'

复制代码

def __str__(self):

复制代码

return self.name

复制代码

View和url

复制代码

# views

复制代码

LOCATION = {'吉林省': {'长春市': ['南关区', '朝阳区', '二道区', '绿园区']}}

复制代码

def choose_province(request):

复制代码

province = list(LOCATION.keys())

复制代码

return JsonResponse(province, safe=False)

复制代码

def choose_city(request):

复制代码

province = request.GET.get('p')

复制代码

cities = list(LOCATION[province].keys())

复制代码

return JsonResponse(cities, safe=False)

复制代码

def choose_district(request):

复制代码

province = request.GET.get('p')

复制代码

city = request.GET.get('c')

复制代码

districts = LOCATION[province][city]

复制代码

return JsonResponse(districts, safe=False)

复制代码

# urls

复制代码

from person.views import choose_province, choose_city, choose_district

复制代码

urlpatterns = [

复制代码

path('province/', choose_province),

复制代码

path('city/', choose_city),

复制代码

path('district/', choose_district),

复制代码

path('admin/', admin.site.urls),

复制代码

]

复制代码

Admin

复制代码

class MemberForm(forms.ModelForm):

复制代码

class Meta:

复制代码

widgets = {

复制代码

'province': forms.Select(),

复制代码

'city': forms.Select(),

复制代码

'district': forms.Select()

复制代码

}

复制代码

@admin.register(Member)

复制代码

class MemberAdmin(admin.ModelAdmin):

复制代码

form = MemberForm

复制代码

fields = ('name', ('province', 'city', 'district'))

复制代码

list_display = ('name', 'province', 'city', 'district')

复制代码

change_form_template = 'area.html'

复制代码

这里需要写一个form将省市区这三个字段显示为单选框.

模板文件
找到django源码中的change_form.html(django/contrib/admin/templates/admin/)文件,复制到app下templates目录中.
在admin中指定自定义的模板文件change_form_template = 'area.html'

复制代码

{% block admin_change_form_document_ready %}

复制代码

[/code][code]

复制代码

(function($) {

复制代码

$('#id_city').change(function() {

复制代码

let p_id = $('#id_province').val();

复制代码

let c_id = $('#id_city').val();

复制代码

$.get('/district/', {"p": p_id, "c": c_id }, function(a_info) {

复制代码

var area_info = $('#id_district').empty().append('' + '---------' + '');

复制代码

$.each(a_info, function(i, area) {

复制代码

area_info.append('' + area + '')

复制代码

});

复制代码

{% if change %}

复制代码

$("#id_district").find("option:contains({{ original.district }})").attr('selected', true);

复制代码

{% endif %}

复制代码

});

复制代码

});

复制代码

$('#id_province').change(function() {

复制代码

let p_id = $('#id_province').val();

复制代码

$.get('/city/', { 'p': p_id }, function(c_info) {

复制代码

var city_info = $('#id_city').empty().append('' + '---------' + '');

复制代码

$.each(c_info, function(i, city) {

复制代码

city_info.append('' + city + '')

复制代码

});

复制代码

{% if change %}

复制代码

$("#id_city").find("option:contains({{ original.city }})").attr('selected', true);

复制代码

$("#id_city").trigger("change");

复制代码

{% endif %}

复制代码

});

复制代码

});

复制代码

$.get('/province/', function(p_info) {

复制代码

var province_info = $('#id_province').empty().append('' + '---------' + '');

复制代码

$.each(p_info, function(i, province) {

复制代码

province_info.append('' + province + '')

复制代码

});

复制代码

{% if change %}

复制代码

$("#id_province").find("option:contains({{ original.province }})").attr('selected', true);

复制代码

$("#id_province").trigger("change");

复制代码

{% endif %}

复制代码

});

复制代码

})(django.jQuery);

复制代码

[code][/code]参考: https://blog.csdn.net/df_1818/article/details/80109964