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查找函数f(x)=0根的解决方法
May 07 Python
Python3指定路径寻找符合匹配模式文件
May 22 Python
win10系统中安装scrapy-1.1
Jul 03 Python
Python实现两个list对应元素相减操作示例
Jun 09 Python
Python2中文处理纪要的实现方法
Mar 10 Python
Python爬虫信息输入及页面的切换方法
May 11 Python
Django给admin添加Action的步骤详解
May 01 Python
Pycharm运行加载文本出现错误的解决方法
Jun 27 Python
python求最大值,不使用内置函数的实现方法
Jul 09 Python
windows上安装python3教程以及环境变量配置详解
Jul 18 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
Jul 20 Python
Python代码注释规范代码实例解析
Aug 14 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脚本的10个技巧(2)
2006/10/09 PHP
加强版phplib的DB类
2008/03/31 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
单位介绍信范文
2014/01/18 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
初中教师个人工作总结
2015/02/10 职场文书
公司文体活动总结
2015/05/07 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL