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 相关文章推荐
Python中的闭包详细介绍和实例
Nov 21 Python
Python下使用Psyco模块优化运行速度
Apr 05 Python
python django事务transaction源码分析详解
Mar 17 Python
Python 3.x读写csv文件中数字的方法示例
Aug 29 Python
教你用Python创建微信聊天机器人
Mar 31 Python
浅谈pycharm出现卡顿的解决方法
Dec 03 Python
浅谈python 读excel数值为浮点型的问题
Dec 25 Python
python 搭建简单的http server,可直接post文件的实例
Jan 03 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
Feb 13 Python
python集合是否可变总结
Jun 20 Python
Python实现基于socket的udp传输与接收功能详解
Nov 15 Python
python数字图像处理:图像简单滤波
Jun 28 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中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP递归创建多级目录
2015/11/05 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
Android面试题及答案
2015/09/04 面试题
编辑找工作求职信范文
2013/12/16 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
安全生产责任书
2014/03/12 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL