django admin 后臺實現(xiàn)三級聯(lián)動的示例代碼

更新時間：2018年06月22日 08:33:47 作者：馮小超

這篇文章主要介紹了django admin 后臺實現(xiàn)三級聯(lián)動的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在剛進(jìn)公司的時候，要寫一個需求，使用django的admin站點管理，實現(xiàn)一個二級聯(lián)動的功能，因為要用到django自帶的頁面，因為不是自定義的，不能直接添加js代碼。根據(jù)我自己的研究簡單的記錄一下大概步驟。

項目創(chuàng)建流程略過，這里使用MySQL數(shù)據(jù)庫和py3為例。

示例項目大概功能，添加一個人物信息，地區(qū)通過三級聯(lián)動選擇。

一、項目創(chuàng)建成功后，首先寫模型類代碼：

class AreaInfo(models.Model):
  """地區(qū)模型類"""

  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 = '地區(qū)信息'
    verbose_name_plural = verbose_name
    

class HeroInfo(models.Model):
  """任務(wù)信息模型類"""
  
  name = models.CharField(max_length = 50)
  # on_delete 表示關(guān)聯(lián)的外鍵表刪除數(shù)據(jù)時，該條數(shù)據(jù)不變，外鍵置為空
  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

在一個模型類中，兩個外鍵關(guān)聯(lián)同一個模型類，要使用related_name進(jìn)行設(shè)置,否則會報錯。related_name 不能相同，否則遷移數(shù)據(jù)庫會出錯，反向查詢名稱重復(fù)。

然后進(jìn)行數(shù)據(jù)庫遷移，在數(shù)據(jù)庫中導(dǎo)入地區(qū)信息，為后續(xù)使用做準(zhǔn)備。

使用數(shù)據(jù)庫時，不要忘記在settings.py中修改數(shù)據(jù)庫配置。同時使用時，要在應(yīng)用的__init__.py文件中，添加以下兩行代碼：

import pymysql
pymysql.install_as_MySQLdb

因為在MySQLdb是python連接MySQL的模塊，在py2中使用，py3中沒有MySQLdb,所以py3要安裝pymysql，并進(jìn)行以上設(shè)置。

二、以上步驟完成之后進(jìn)行第二部，注冊模型類

@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默認(rèn)的路徑

三、在template中新建一個文件admin，在admin中新建一個area.html頁面，將django 中的 change_form.html內(nèi)容拷貝過來。

后面寫三級聯(lián)動的js要在這里，改變django默認(rèn)的路徑，讀取的也是該頁面，上面在admin中已經(jīng)進(jìn)行了設(shè)置。

四、以上步驟完成以后就可以開始寫三級聯(lián)動的js和view。

1.html中添加js代碼如下：

發(fā)送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)

這里注意，要設(shè)置safe=False，否則會報錯：

TypeError: In order to allow non-dict objects to be serialized set the safe parameter to False.

2.發(fā)送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.發(fā)送ajax請求，獲取并展示區(qū)信息
$.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):
  """查詢區(qū)"""
  
  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)

五、完成之后便可實現(xiàn)admin后臺站點的三級聯(lián)動

六、django功能強(qiáng)大，用法很多，平時沒事多研究官方文檔

七、完整代碼在我的github上可以看到

https://github.com/duyunj/ThirdRepository

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: