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自动化测试之setUp与tearDown实例
Sep 28 Python
Python中的ceil()方法使用教程
May 14 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
Aug 15 Python
Python wxPython库使用wx.ListBox创建列表框示例
Sep 03 Python
python实现文件的备份流程详解
Jun 18 Python
Flask框架模板继承实现方法分析
Jul 31 Python
浅谈Django+Gunicorn+Nginx部署之路
Sep 11 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
Nov 15 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
Dec 18 Python
Python图像处理库PIL的ImageFilter模块使用介绍
Feb 26 Python
python-图片流传输的思路及示例(url转换二维码)
Dec 21 Python
利用Python实现翻译HTML中的文本字符串
Jun 21 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/06 PHP
php生成excel文件的简单方法
2014/02/08 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python实现二叉搜索树
2016/02/03 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python List cmp()知识点总结
2019/02/18 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
2014年作风建设工作总结
2014/10/29 职场文书
会议欢迎词
2015/01/23 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang