python三级联动_DjangoAdmin实现三级联动(省市区)
通过⾃定义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 = ('p')
cities = list(LOCATION[province].keys())
return JsonResponse(cities, safe=False)
def choose_district(request):
province = ('p')
city = ('c')
districts = LOCATION[province][city]
return JsonResponse(districts, safe=False)
# urls
django admin 自定义页面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()
}
@ister(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 %}
src="{% static 'admin/js/change_form.js' %}"
{% if adminform and add %}
data-model-name="{{ del_name }}"
{% endif %}>
(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);

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。