django admin 后台实现三级联动

在刚进公司的时候,要写一个需求,使用django的admin站点管理,实现一个二级联动的功能,因为要用到django自带的页面,因为不是自定义的,不能直接添加js代码。根据我自己的研究简单的记录一下大概步骤。

项目创建流程略过,这里使用MySQL数据库和py3为例。
示例项目大概功能,添加一个人物信息,地区通过三级联动选择。
一、项目创建成功后,首先写模型类代码:
class AreaInfo(models.Model):
    """地区模型类"""

    name = models.CharField(max_length = 50)
    pid = models.ForeignKey('self', related_name = 'areas',null=True, blank=True, on_delete = models.SET_NULL)
    
    def __str__(self):
        return self.name
        
    class Meta:
        db_table = 'areainfo'
        
        verbose_name = '地区信息'
        verbose_name_plural = verbose_name
        

class HeroInfo(models.Model):
    """任务信息模型类"""
    
    name = models.CharField(max_length = 50)
    # on_delete 表示关联的外键表删除数据时,该条数据不变,外键置为空
    province = models.ForeignKey(AreaInfo, null=True, blank=True, on_delete = models.SET_NULL)
    city = models.ForeignKey(AreaInfo, related_name = 'areainfo', null=True, blank=True, on_delete = models.SET_NULL)
    country = models.ForeignKey(AreaInfo, related_name = 'areainfos', null=True, blank=True, on_delete = models.SET_NULL)
    
    def __str__(self):
        return self.name
    
    class Meta:
        db_table = 'heroinfo'
        
        verbose_name = '人物信息'
        verbose_name_plural = verbose_name

在一个模型类中,两个外键关联同一个模型类,要使用related_name进行设置,否则会报错。related_name 不能相同,否则迁移数据库会出错,反向查询名称重复。
然后进行数据库迁移,在数据库中导入地区信息,为后续使用做准备。
使用数据库时,不要忘记在settings.py中修改数据库配置。同时使用时,要在应用的__init__.py文件中,添加以下两行代码:

import pymysql
pymysql.install_as_MySQLdb

因为在MySQLdb是python连接MySQL的模块,在py2中使用,py3中没有MySQLdb,所以py3要安装pymysql,并进行以上设置。

二、以上步骤完成之后进行第二部,注册模型类

@admin.register(AreaInfo)
class AreaAdmin(admin.ModelAdmin):
    
    list_display = ('name', 'pid')  # 这里要使用元组或者列表

@admin.register(HeroInfo)
class HeroAdmin(admin.ModelAdmin):
    
    list_display = ('name', 'province', 'city', 'country')

    change_form_template = 'area.html'

在这里用到了change_form_template,可以自定义访问路径,改变django默认的路径

三、在template中新建一个文件夹admin,在admin中新建一个area.html页面,将django 中的 change_form.html内容拷贝过来。
后面写三级联动的js要在这里,改变django默认的路径,读取的也是该页面,上面在admin中已经进行了设置。

还有一种让django admin使用自定义的html的方法,就是在你的项目中templates文件夹下,建一个admin文件夹,进入,在admin文件中新建一个与你的app名字相同的文件夹,比如,在如果我的app名为asset,我需要在admin下,建一个名为asset的文件夹,然后在该文件夹下建一个change_form.html文件,继承原来的change_form.html文件,要将原来的change_form.html放在admin文件夹下,然后在area下的html文件中写js代码。

 

注意,js代码写在

{% block extrajs %}
{% endblock %}

中。

在这里解释一下,因为django在读取html的时候会先到项目的templates下对应的app中寻找html,如果你没有自定义的话,这个时候django就会用自带的html。

在这里我用的是第一种方法,因为刚开始写,对django的使用不够熟练,百度了一下,找到了第一种用法。

你要修改django其他的页面,都可以用这两种方法,只要把你的html名字改一下,继承的文件修改一下即可。如图中的change_list.html,是用来修改django admin的列表页的。


四、以上步骤完成以后就可以开始写三级联动的js和view。
1.
html中添加js代码如下:
发送ajax请求,获取并展示省份信息
$.get('/areas/choose/province/',function(p_info){
    var province_info = $('#id_province').empty().append('<option value>'+'---------'+'</option>');
    
    $.each(p_info.p_lists,function(i,province){
        
    province_info.append('<option value="'+province.p_id+'">'+province.p_name+'</option>')
                    
    });
url配置: url(r'^choose/province/$', views.choose_province),

视图代码:
def choose_province(request):
    """查询省"""

    provinces = AreaInfo.objects.filter(pid=None)


    p_lists = [{"p_id": province.id, "p_name": province.name} for province in provinces]
    p_info = {"p_lists":p_lists}
    
    return JsonResponse(p_info, safe=False)
这里注意,要设置safe=False,否则会报错:
TypeError: In order to allow non-dict objects to be serialized set the safe parameter to False.
2.
发送ajax请求,获取并展示城市信息
$.get('/areas/choose/province/',function(p_info){
        var province_info = $('#id_province').empty().append('<option value>'+'---------'+'</option>');
        
        $.each(p_info.p_lists,function(i,province){
            
        province_info.append('<option value="'+province.p_id+'">'+province.p_name+'</option>')
            
    });

        $('#id_province').change(function(){
            p_id = $(this).val();
            
    $.get('/areas/choose/city/',{'p_id':p_id},function(c_info){
            var city_info = $('#id_city').empty().append('<option value>'+'---------'+'</option>');
            $.each(c_info.c_lists,function(i,city){
                city_info.append('<option value="'+city.c_id+'">'+city.c_name+'</option>')
                })
            })
        });   

URL配置:url(r'^choose/city/$', views.choose_city),

视图代码:
def choose_city(request):
    """查询市"""

    p_id = request.GET.get('p_id')
    print(p_id,'--------')
    citys = AreaInfo.objects.filter(pid=p_id)
    c_lists = [{"c_id": city.id, "c_name": city.name} for city in citys]
    print(c_lists[0:5])
    c_info = {"c_lists": c_lists}
    return JsonResponse(c_info, safe=False)

3.发送ajax请求,获取并展示区信息
$.get('/areas/choose/province/',function(p_info){
        var province_info = $('#id_province').empty().append('<option value>'+'---------'+'</option>');
        
        $.each(p_info.p_lists,function(i,province){
            
        province_info.append('<option value="'+province.p_id+'">'+province.p_name+'</option>')
            
    });

        $('#id_province').change(function(){
            p_id = $(this).val();
            
    $.get('/areas/choose/city/',{'p_id':p_id},function(c_info){
            var city_info = $('#id_city').empty().append('<option value>'+'---------'+'</option>');
            $.each(c_info.c_lists,function(i,city){
                city_info.append('<option value="'+city.c_id+'">'+city.c_name+'</option>')
                })
            })
        });   
        
    $('#id_city').change(function(){
        c_id = $(this).val();

    $.get('/areas/choose/area/',{"c_id": c_id},function(a_info){
        var area_info = $('#id_country').empty().append('<option value>'+'---------'+'</option>');
            $.each(a_info.a_lists,function(i,area){
                area_info.append('<option value="'+area.a_id+'">'+area.a_name+'</option>')
                });
            });
        });
                        });

URL配置:url(r'^choose/area/$', views.choose_area),

视图代码:
def choose_area(request):
    """查询区"""
   
    c_id = request.GET.get('c_id')
    print(c_id,'=======')
    areas = AreaInfo.objects.filter(pid=c_id)
    print(areas)
    a_lists = [{"a_id": area.id, "a_name": area.name } for area in areas]
    a_info = {"a_lists": a_lists}
    print(a_info)
    return JsonResponse(a_info, safe=False)

五、完成之后便可实现admin后台站点的三级联动

六、django功能强大,用法很多,平时没事多研究官方文档

七、源码地址:https://github.com/duyunj/Fourth.git


    

  • 2
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值