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

2018-10-15 17:35

阅读:727

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

项目创建流程略过,这里使用MySQL数据库和py3为例。

示例项目大概功能,添加一个人物信息,地区通过三级联动选择。

一、项目创建成功后,首先写模型类代码:

class AreaInfo(models.Model): 地区模型类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文件中,添加以下两行代码:

因为在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上可以看到

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


评论


亲,登录后才可以留言!