django admin后台新增页面,修改页面,实现城市三级联动(非数据库)

2022年10月3日10:40:27后端程序开发评论118 views字数 3056阅读模式

1 需求

在django的admin后台的新增页面和修改页面,实现三级联动,就是你选择一个省份,下面的城市就是这个省份的,选择不同的省份,下面就是不同的城市,实现这种联动

2 实现

首先是建立一个表

class City(models.Model):
    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='区/县')


    def __str__(self):
        return self.province

    class Meta:
        verbose_name_plural = verbose_name = '城市'
        db_table = 'City'
django admin后台新增页面,修改页面,实现城市三级联动(非数据库)

将这个表生成到数据库里面,在admin.py里面注册到admin的后台

class CityForm(forms.ModelForm):
    class Meta:
        widgets = {
            'province': forms.Select(),
            'city': forms.Select(),
            'district': forms.Select(),
        }

class CityAdmin(admin.ModelAdmin):
    form = CityForm
    fields = ( 'province', 'city', 'district')
    list_display = ( 'province', 'city', 'district')


admin.site.register(City, CityAdmin)
django admin后台新增页面,修改页面,实现城市三级联动(非数据库)

写相关的接口

    url(r'^province/$', views.choose_province, name='city'),  #
    url(r'^city/$', views.choose_city, name='shi'),  #
    url(r'^district/$', views.choose_district, name='xian'),  #
django admin后台新增页面,修改页面,实现城市三级联动(非数据库)

我是在代码里面写死了城市,你可以将逻辑改为从数据库查询数据,反正返回的东西一样就可以

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)

之后就是重写页面,我使用的是simplue的UI框架,所以找到他源码里面的这个文件

django admin后台新增页面,修改页面,实现城市三级联动(非数据库)

在自己的模板下创建相同的目录

django admin后台新增页面,修改页面,实现城市三级联动(非数据库)

然后将源码里面的东西复制进去

然后里面的东西什么都不变,在最下面加上这个

<script type="text/javascript">
(function($) {
            $('#id_city').change(function() {
                let p_id = $('#id_province').val();
                let c_id = $('#id_city').val();
                if (p_id && c_id ){
                    $.get('/district/', {"p": p_id, "c": c_id }, function(a_info) {
                        var area_info = $('#id_district').empty().append('<option value>' + '---------' + '</option>');
                        console.log(a_info);
                        $.each(a_info, function(i, area) {
                            area_info.append('<option value="' + area + '">' + area + '</option>')
                        });
                        {% if change %}
                            $("#id_district").find("option:contains({{ original.district }})").attr('selected', true);
                        {% endif %}
                    });

                }else {
                    $('#id_district').empty()
                }

            });

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

                 if (p_id ) {
                     $.get('/city/', {'p': p_id}, function (c_info) {
                         var city_info = $('#id_city').empty().append('<option value>' + '---------' + '</option>');
                         $.each(c_info, function (i, city) {
                             city_info.append('<option value="' + city + '">' + city + '</option>')
                         });
                         {% if change %}
                             $("#id_city").find("option:contains({{ original.city }})").attr('selected', true);
                             $("#id_city").trigger("change");
                         {% endif %}
                     });
                 }else {
                    $('#id_district').empty()
                     $('#id_city').empty()
                }
            });

            $.get('/province/', function(p_info) {
                var province_info = $('#id_province').empty().append('<option value>' + '---------' + '</option>');
                $.each(p_info, function(i, province) {
                    province_info.append('<option value="' + province + '">' + province + '</option>')
                });
                {% if change %}
                    $("#id_province").find("option:contains({{ original.province }})").attr('selected', true);
                    $("#id_province").trigger("change");
                {% endif %}
            });
        })(django.jQuery);


</script>
django admin后台新增页面,修改页面,实现城市三级联动(非数据库)

以上就可以了,实现了三级联动;

最终的结果就是

django admin后台新增页面,修改页面,实现城市三级联动(非数据库)
django admin后台新增页面,修改页面,实现城市三级联动(非数据库)

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/bc/28197.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定