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中已经进行了设置。
四、以上步骤完成以后就可以开始写三级联动的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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 微信小程序使用WebSokcet实现相关请求
- Vue.js系列之二Vue实例
- autoload自动加载机制使用
- EF 约定介绍
- 关于EF Code First模式不同建模方式对建表产生的影响
- C# 命名空间和程序集
- C# new关键字和对象类型转换(双括号、is操作符、as操作符)
- 防止小程序多次点击跳转解决方案
- 详述 SQL 中的 distinct 和 row_number() over() 的区别及用法
- Web API系列之三 基本功能实现
- 微信小程序的省市选择组件 citySelector分享
- 详述 Java 语言中的 String、StringBuffer 和 StringBuilder 的使用方法及区别
- Class与Style绑定
- 机器学习并不难
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python结巴分词,字符串余弦相似度算法实现关键词筛选及整理
- git的分支远程连接和远程分支的拉取推送及冲突处理
- requests session的应用,python金点设计奖数据爬虫
- 站长工具关键词挖掘采集,Python关键词批量挖掘采集工具
- python百度关键词相关搜索词采集,链轮查询采集exe工具
- Python最火爬虫框架Scrapy入门与实践,豆瓣电影 Top 250 数据采集
- Python爬虫三种解析方式,Pyhton360搜索排名查询
- Python关键词百度指数采集,抓包Cookie及json数据处理
- 常用的package.json,还有这么多你不知道的骚技巧
- 【词库】Python关键词筛选分类,Levenshtein编辑距离算法分词
- 爬取数据缺失的补坑,Python数据爬取的坑坑洼洼如何铲平
- 如何开发跨框架的组件
- SpringBoot系列之异步任务@Async使用教程
- 深入k8s:k8s部署&在k8s中运行第一个程序
- Java是如何实现Future模式的?万字详解!