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中关于日期时间处理的问答集锦
Mar 08 Python
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
Jan 23 Python
在Python的web框架中编写创建日志的程序的教程
Apr 30 Python
Python中取整的几种方法小结
Jan 06 Python
Python时间获取及转换知识汇总
Jan 11 Python
Python中工作日类库Busines Holiday的介绍与使用
Jul 06 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
Oct 22 Python
python导入坐标点的具体操作
May 10 Python
pandas如何处理缺失值
Jul 31 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
Feb 18 Python
10个示例带你掌握python中的元组
Nov 23 Python
Python数据可视化之用Matplotlib绘制常用图形
Jun 03 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
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
如何实现JS函数的重载
2006/09/22 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现telnet客户端的方法
2015/04/15 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
python实现共轭梯度法
2019/07/03 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
新学期开学演讲稿
2014/05/24 职场文书
售后客服工作职责
2014/06/16 职场文书
驻村工作先进事迹
2014/08/14 职场文书
长城导游词400字
2015/01/30 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android