Django自關聯實現多級聯動查詢例項

阿新 • • 發佈：2020-05-20

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',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自關聯實現多級聯動查詢例項