django admin 后台实现三级联动的示例代码

框架(架构)  /  管理员 发布于 7年前   216

在刚进公司的时候，要写一个需求，使用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 pymysqlpymysql.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中已经进行了设置。

四、以上步骤完成以后就可以开始写三级联动的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功能强大，用法很多，平时没事多研究官方文档

七、完整代码在我的github上可以看到

https://github.com/duyunj/ThirdRepository

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。