Django自关联实现多级联动查询实例


Posted in Python onMay 19, 2020

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

说明:

name :省市县的名字
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 文件

<body>
  <select id = 'pro'>
    <option value=''>请选择省</option>
  </select>
  <select id = 'city'>
    <option value=''>请选择市</option>
  </select>
  <select id = 'dis'>
    <option value=''>请选择县</option>
  </select>
</body>

<script>
address = function(a, b)
{
  $.get('/addr/'+a, function (dic){
    $.each(dic, function(index, item){
      b.append('<option value="' + item.id + '">' + item.address + '</option>')
    })
  })
}

$(function (){
  // 获取省市县元素
  pro = $('#pro')
  city = $('#city')
  dis = $('#dis')

  // 查询省信息
  address(0, pro)

  // 根据省查询市信息
  pro.change(function(){
    city.empty().append('<option value="">请选择市</option>');
    dis.empty().append('<option value="">请选择县</option>');
    adress(this.value, city)
  })
  // 根据市查询县信息
  city.change(function(){
    dis.empty().append('<option value="">请选择县</option>');
    adress(this.value, dis)
  })
})
</script>

3 效果

Django自关联实现多级联动查询实例

Django自关联实现多级联动查询实例

以上这篇Django自关联实现多级联动查询实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
浅析python中的迭代与迭代对象
Oct 08 Python
python 读取Linux服务器上的文件方法
Dec 27 Python
详解Python3 对象组合zip()和回退方式*zip
May 15 Python
在Python函数中输入任意数量参数的实例
Jul 16 Python
django 微信网页授权登陆的实现
Jul 30 Python
Python中zip()函数的简单用法举例
Sep 02 Python
Python 经典算法100及解析(小结)
Sep 13 Python
Python日期格式和字符串格式相互转换的方法
Feb 18 Python
Python PyQt5整理介绍
Apr 01 Python
python中Mako库实例用法
Dec 31 Python
自己搭建resnet18网络并加载torchvision自带权重的操作
May 13 Python
Python requests用法和django后台处理详解
Mar 19 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
May 19 #Python
django 数据库返回queryset实现封装为字典
May 19 #Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
May 19 #Python
python 数据分析实现长宽格式的转换
May 18 #Python
如何把外网python虚拟环境迁移到内网
May 18 #Python
python 实现 hive中类似 lateral view explode的功能示例
May 18 #Python
pandas dataframe 中的explode函数用法详解
May 18 #Python
You might like
为你总结一些php信息函数
2015/10/21 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
语义化 H1 标签
2008/01/14 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
jQuery.each使用详解
2015/07/07 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
记录Django开发心得
2014/07/16 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
对python的输出和输出格式详解
2018/12/08 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
自我鉴定标准格式
2014/03/19 职场文书
老师对学生的寄语
2014/04/09 职场文书
推广普通话标语
2014/06/27 职场文书
个人四风对照检查材料
2014/09/26 职场文书
东京审判观后感
2015/06/01 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript