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系列之数据处理编程实例(一)
May 22 Python
python实现可将字符转换成大写的tcp服务器实例
Apr 29 Python
python安装教程 Pycharm安装详细教程
May 02 Python
老生常谈Python基础之字符编码
Jun 14 Python
pandas 根据列的值选取所有行的示例
Nov 07 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
Jan 17 Python
详解Python爬取并下载《电影天堂》3千多部电影
Apr 26 Python
python 求一个列表中所有元素的乘积实例
Jun 11 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
Aug 21 Python
Python udp网络程序实现发送、接收数据功能示例
Dec 09 Python
tensorflow常用函数API介绍
Apr 19 Python
Python 实现自动登录+点击+滑动验证功能
Jun 10 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
spyder常用快捷键(分享)
2017/07/19 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
windows下python和pip安装教程
2018/05/25 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
车间副主任岗位职责
2013/12/24 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
气象学专业个人求职信
2014/03/15 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
Linux磁盘管理方法介绍
2022/06/01 Servers