Django Admin实现三级联动的示例代码(省市区)


Posted in Python onJune 22, 2018

通过自定义Admin的模板文件实现省市区的三级联动.要求创建记录时,根据省>市>区的顺序选择依次显示对应数据.

修改记录时默认显示已存在的数据.

Django Admin实现三级联动的示例代码(省市区)

Django Admin实现三级联动的示例代码(省市区)

Model

class Member(models.Model):
  name = models.CharField(max_length=100, verbose_name='姓名')
  province = models.CharField(max_length=100, null=True, blank=True, verbose_name='省份')
  city = models.CharField(max_length=100, null=True, blank=True, verbose_name='城市')
  district = models.CharField(max_length=100, null=True, blank=True, verbose_name='区/县')

  class Meta:
    verbose_name_plural = verbose_name = '人员'

  def __str__(self):
    return self.name

View和url

# views
LOCATION = {'吉林省': {'长春市': ['南关区', '朝阳区', '二道区', '绿园区']}}


def choose_province(request):
  province = list(LOCATION.keys())
  return JsonResponse(province, safe=False)


def choose_city(request):
  province = request.GET.get('p')
  cities = list(LOCATION[province].keys())
  return JsonResponse(cities, safe=False)


def choose_district(request):
  province = request.GET.get('p')
  city = request.GET.get('c')
  districts = LOCATION[province][city]
  return JsonResponse(districts, safe=False)
  
# urls
from person.views import choose_province, choose_city, choose_district

urlpatterns = [
  path('province/', choose_province),
  path('city/', choose_city),
  path('district/', choose_district),
  path('admin/', admin.site.urls),
]

Admin

class MemberForm(forms.ModelForm):
  class Meta:
    widgets = {
      'province': forms.Select(),
      'city': forms.Select(),
      'district': forms.Select()
    }

@admin.register(Member)
class MemberAdmin(admin.ModelAdmin):
  form = MemberForm
  fields = ('name', ('province', 'city', 'district'))
  list_display = ('name', 'province', 'city', 'district')
  change_form_template = 'area.html'

这里需要写一个form将省市区这三个字段显示为单选框.

模板文件

找到django源码中的change_form.html(django/contrib/admin/templates/admin/)文件,复制到app下templates目录中.

在admin中指定自定义的模板文件 change_form_template = 'area.html'

{% block admin_change_form_document_ready %}
  <script type="text/javascript"
      id="django-admin-form-add-constants"
      src="{% static 'admin/js/change_form.js' %}"
      {% if adminform and add %}
        data-model-name="{{ opts.model_name }}"
      {% endif %}>
  </script>

  <script type="text/javascript">
    (function($) {
      $('#id_city').change(function() {
        let p_id = $('#id_province').val();
        let c_id = $('#id_city').val();
        $.get('/district/', {"p": p_id, "c": c_id }, function(a_info) {
          var area_info = $('#id_district').empty().append('<option value>' + '---------' + '</option>');
          $.each(a_info, function(i, area) {
            area_info.append('<option value="' + area + '">' + area + '</option>')
          });
          {% if change %}
            $("#id_district").find("option:contains({{ original.district }})").attr('selected', true);
          {% endif %}
        });
      });

      $('#id_province').change(function() {
        let p_id = $('#id_province').val();
        $.get('/city/', { 'p': p_id }, function(c_info) {
          var city_info = $('#id_city').empty().append('<option value>' + '---------' + '</option>');
          $.each(c_info, function(i, city) {
            city_info.append('<option value="' + city + '">' + city + '</option>')
          });
          {% if change %}
            $("#id_city").find("option:contains({{ original.city }})").attr('selected', true);
            $("#id_city").trigger("change");
          {% endif %}
        });
      });

      $.get('/province/', function(p_info) {
        var province_info = $('#id_province').empty().append('<option value>' + '---------' + '</option>');
        $.each(p_info, function(i, province) {
          province_info.append('<option value="' + province + '">' + province + '</option>')
        });
        {% if change %}
          $("#id_province").find("option:contains({{ original.province }})").attr('selected', true);
          $("#id_province").trigger("change");
        {% endif %}
      });
    })(django.jQuery);
  </script>

参考: https://3water.com/article/142409.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python3基础之条件与循环控制实例解析
Aug 13 Python
Python EOL while scanning string literal问题解决方法
Sep 18 Python
python获取一组汉字拼音首字母的方法
Jul 01 Python
正确理解python中的关键字“with”与上下文管理器
Apr 21 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
Dec 19 Python
python脚本作为Windows服务启动代码详解
Feb 11 Python
PyCharm代码格式调整方法
May 23 Python
Python subprocess模块功能与常见用法实例详解
Jun 28 Python
wxpython布局的实现方法
Nov 01 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
Jan 02 Python
keras model.fit 解决validation_spilt=num 的问题
Jun 19 Python
一行代码python实现文件共享服务器
Apr 22 Python
详解python中的json和字典dict
Jun 22 #Python
python实现雨滴下落到地面效果
Jun 21 #Python
使用python读取csv文件快速插入数据库的实例
Jun 21 #Python
详解python3中tkinter知识点
Jun 21 #Python
Python3用tkinter和PIL实现看图工具
Jun 21 #Python
Python3.4 tkinter,PIL图片转换
Jun 21 #Python
Python3实现转换Image图片格式
Jun 21 #Python
You might like
理解php Hash函数,增强密码安全
2011/02/25 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
javascript中length属性的探索
2011/07/31 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python算的上脚本语言吗
2020/06/22 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
销售人员个人求职信
2013/09/26 职场文书
七年级英语教学反思
2014/01/15 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
年会主持词结束语
2014/03/27 职场文书
党支部活动策划方案
2014/08/18 职场文书
自我评价优缺点范文
2015/03/11 职场文书
招商银行收入证明
2015/06/17 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电