关联查询允许为空_Django自关联实现多级联动查询

c856118c6686af8fb2d5ce2529158dd4.png

脚本之家

你与百万开发者在一起

c856118c6686af8fb2d5ce2529158dd4.png 41f38c7ff523658e927d8db79187fa58.gif

e1b7499f025d4a4bcb6ae9df24c7da42.png

作者 | 二赛君

出品 | 脚本之家(ID:jb51net)

1 问题引出

我们在开发网站的时候可能会遇到这种情况,多个字段之间有一定的关联性,比如省市县,选择省,之后下一个选择框的值则为该省的市集合,选择市之后下一个选择框的值为该市的县集合。

一种实现方式是,建立三个模型表,用外键一对多方式,显然这样是不太合理的。Django提供了自关联的实现,模型自身关联,即一条数据关联另一条数据。

本文以省市县为案例介绍其具体实现方法。

2 具体实现

2.1 建立数据表Model

在model.py中建立数据表

class AdressInfo(models.Model):

address = models.CharField(max_length = 200, null = True, blank = True, verbose_name = ‘地址’)

pid = models.ForeignKey(‘self’ , null = True, blank = True, verbose_name = ‘自关联’)

def __str__(self):

return self.adress

说明:
  • address :省市县的名字

  • pid:外键,self自关联,这里也可以使用 AdressInfo

  • null:为True表示可以为空,因为省级行政单位没有父级

  • blank:为True表示admin后台数据写入的时候可以允许为空

然后迁移数据库

python manage.py makemigrations

python manage.py migrate

这时可以在后台数据表中添加数据

2.2 后端url和view函数

将前端网页地址映射为对应函数,用正则表达式获取前端传输的pid 

url.py 文件

urlpatterns = [

url(r'^addr/(d+)$', Address.addrAPI, name = 'Addr)

]

view.py 文件

def addrAPI(request,addr_id): # 接收一个参数的id,指model中的pid属性对应的字段

if (int(addr_id) == 0): # 为0表示查询省,省的pid_id为null

address_data = AddressInfo.objects.filter(pid__isnull = True).values('id','address')

else: # 查询市或其他县

address_data = AddressInfo.objects.filter(pid_id = int(addr_id)).values('id','address')

area_list = []

for a in address_data:

area_list.append({'id':a['id'], 'address':a['address']})

return JsonResponse(area_list, safe = False)

2.3 前端template

前端主要是显示和执行操作相应,具体实现是通过下拉框值的改变触动相应函数。这里只写关键的地方。

address.html 文件

id = 'pro'>

value=''>请选择省

id = 'city'>

value=''>请选择市

id = 'dis'>

value=''>请选择县

address = function(a, b)

{

$.get('/addr/'+a, function (dic){

$.each(dic, function(index, item){

b.append('+ item.id + '">' + item.address + '')

})

})

}

$(function (){

// 获取省市县元素

pro = $('#pro')

city = $('#city')

dis = $('#dis')

// 查询省信息

address(0, pro)

// 根据省查询市信息

pro.change(function(){

city.empty().append('请选择市');

dis.empty().append('请选择县');

adress(this.value, city)

})

// 根据市查询县信息

city.change(function(){

dis.empty().append('请选择县');

adress(this.value, dis)

})

})

3 效果

38ad60b845581cbcc320ba607a6c4658.png

a88d8d40e8ee649408086b15a11fcf5f.png

10487a2e6dfd41d5cf58699395c3290d.png

作者简介:二赛君,初入职场小白,业余时间喜欢折腾,某985高校机械出身的代码搬砖工。

声明:本文为 脚本之家专栏作者 投稿,未经允许请勿转载。

-END-

b56a623a691e9165f579bd943eafc4b1.png

觉得不错,请把这篇文章分享给你的朋友

转载 / 投稿请联系:Panda-nian

更多精彩,点击菜单栏“文章”进行查看2d0e05f69d439d6f422015e86f91a98b.gif

● d8a3ae55433a1cc7639e0a0f885a1008.gif 中国锦鲤信小呆为兑奖曾刷爆信用卡、陷入焦虑?网友:但我仍想做锦鲤

● d8a3ae55433a1cc7639e0a0f885a1008.gif 脚本之家粉丝福利,请查看!

● d8a3ae55433a1cc7639e0a0f885a1008.gif 中国互联网公司亏损能力排行榜

● 微软劝你别再使用 IE 浏览器

● 最具潜力的编程语言GO有新书啦!

c04bda952529a5ce3e5255786316d28f.gif

小贴士

返回 上一级 搜索“Java 女程序员 大数据 留言送书 运维 算法 Chrome 黑客 Python JavaScript 人工智能 女朋友 MySQL 书籍 等关键词获取相关文章推荐。

1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值